Create function for lazy-load higher res images #340

Closed
smeranda opened this Issue Jul 27, 2012 · 8 comments

Projects

None yet

3 participants

@smeranda
Contributor

Not sure the best approach—and nor is the web community in general—to allow low/high resolution images. In the mobile first world, this could involve using the img element for the lower sized graphic and then provide data-hires attribute for larger. Then upon page load (perhaps after rendering), we load the high res placement.

I could see this as something we'd want throughout many pages on the site, so I'm including the request to support at a template-wide level. Any thoughts on how best to proceed?

@cbwiedel
Contributor

Have you checked out this article on 'Responsive Images'?
http://css-tricks.com/on-responsive-images/

@smeranda
Contributor
smeranda commented Aug 6, 2012

See pull request #349

@ericras ericras added a commit to ericras/wdntemplates that referenced this issue Aug 16, 2012
@ericras ericras [gh-340] [gh-349] WDN.images: use image load event listener instead o…
…f XHR

Instead of XMLHttpRequest, use an event listener on a new Image object.

Also rearchitecting and documentation.
9616abb
@ericras ericras added a commit to ericras/wdntemplates that referenced this issue Aug 17, 2012
@ericras ericras [gh-340] [gh-349] Add image onload event for IE8 & reser imageList on…
… resize
c26a408
@smeranda
Contributor
smeranda commented Oct 1, 2012

When 2 or more images on the page utilize this feature, the XMLHttpRequests are made in such a fashion that they "race" and therefore the associated returns may be misshandled by the client causing the incorrect status to be associated with the wrong request.

Multiple requests could be made with different objects, or perhaps a delay could be inserted between requests?

@smeranda
Contributor
smeranda commented Oct 1, 2012

The plugin looks for images with a certain class, however the script runs (when testing vs compressed all.js) before the DOM is loaded and therefore doesn't find any images.

Need to wait for the DOM.

@smeranda
Contributor
@kabel kabel was assigned Jun 6, 2013
@smeranda
Contributor
smeranda commented Jun 6, 2013

With full-width presentational content (including images) becoming an important part of the 4.0 design, the need for allowing multiple image files based on screen size is extremely important.

@kabel
Member
kabel commented Jul 9, 2013

Rescheduled: need more input on what we should do with the current plugin.

@smeranda
Contributor
smeranda commented Jul 9, 2013

Deprecate current. We have a module in CMS now, no need to create something
else.

On Tuesday, July 9, 2013, Kevin Abel wrote:

Rescheduled: need more input on what we should do with the current plugin.


Reply to this email directly or view it on GitHubhttps://github.com/unl/wdntemplates/issues/340#issuecomment-20696178
.

Seth Meranda
User Experience Architect
University of Nebraska-Lincoln
seth@unl.edu
http://www.unl.edu/

@kabel kabel closed this Jul 19, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment