I wish it were possible to delay the loading of images using JS. That would allow them to be swapped for images that were the appropriate resolution for the device looking at them.
This is this big issue with responsive web design. There is a solution, but it requires both modifying HTML and additional HTTP requests:
Why wouldn't it be possible? Just make placeholder div tags with fixed and accurate size (unless you don't mind re-flowing as they load - I dislike it), then JS the device type and create img tags on the fly.
But you can ask Joe Client to make everything as they like, and then post-process it when it's saved, shrinking images and replacing them with placeholders automatically.
edit: looked at page code.
Isn't that nearly the same as placeholders though? You're asking them to suffix their images, and add a non-standard attribute to every one they want to load dynamically. That burden, and the image resizing, is all done by Joe Client via that framework, under identical assumptions. That's not magical, and it's functionally identical to what I proposed, but it causes extra requests.
It is nearly the same as a placeholder. The advantage is that even without JS, it still functions and has meaning. This is a big advantage.
Just as your placeholder could happen in post processing, so could the suffix and attribute be added.
Having looked into this more there seem to be only three decent approaches. 1) Send the small image first potentially causing extra HTTP requests. 2) Require JS to make a placeholder swap. 3) Cap the image dimensions server side based on a User Agent/Resolution table.
Option 3 is terrible to implement but avoids the downsides the others have.
it's possible but i don't know how to do it. look at youtube result pages. it only loads the images in the visible browser screen and as you scroll down it loads the remaining.
You're thinking of lazy load. He's talking about something different. If you were wondering how to do that, though, here is a link http://www.appelsiini.net/projects/lazyload
Am I missing something? You just load a placeholder image and then after page load (or hitting a certain document scroll position or …) you alter the img src to point at the desired image. The main trick is avoiding making this jerky, which might really be more of a case of a single placeholder and then generating images on the fly as appropriate for the form-factor.
The article's not loading for me, but I can't figure out why you'd bother with jQuery to preload images instead of pure Javascript and the image object...
--edit--
Oh, it just loaded. It looks like it's meant to preload CSS images, which makes more sense.
I've used this on at least 10 production sites, for years. It works great.
The Filament Group blog is filled with gems like this, highly recommended reading. FWIW, Filament Group contribute heavily to jqUI, and developed Themeroller.
19 comments
[ 2.6 ms ] story [ 68.2 ms ] threadThis is this big issue with responsive web design. There is a solution, but it requires both modifying HTML and additional HTTP requests:
http://filamentgroup.com/examples/responsive-images/
The problem is that I can't ask Joe Client to create placeholder divs. I want to handle it magically for him.
edit: looked at page code.
Isn't that nearly the same as placeholders though? You're asking them to suffix their images, and add a non-standard attribute to every one they want to load dynamically. That burden, and the image resizing, is all done by Joe Client via that framework, under identical assumptions. That's not magical, and it's functionally identical to what I proposed, but it causes extra requests.
Just as your placeholder could happen in post processing, so could the suffix and attribute be added.
Having looked into this more there seem to be only three decent approaches. 1) Send the small image first potentially causing extra HTTP requests. 2) Require JS to make a placeholder swap. 3) Cap the image dimensions server side based on a User Agent/Resolution table.
Option 3 is terrible to implement but avoids the downsides the others have.
--edit--
Oh, it just loaded. It looks like it's meant to preload CSS images, which makes more sense.
The Filament Group blog is filled with gems like this, highly recommended reading. FWIW, Filament Group contribute heavily to jqUI, and developed Themeroller.
(Ready = DOM is ready, load = page elements are loaded)