6 ms·

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 dev

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: http://filamentgroup.com/examples/responsive-images/ http://filamentgroup.com/examples/responsive-images/

Groxx 16y ago
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.
- JoelSutherland 16y ago
  That is effectively the same (but not quite as nice) as the solution I linked to. The problem is that I can't ask Joe Client to create placeholder divs. I want to handle it magically for him.
  - Groxx 16y ago
    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.
    - JoelSutherland 16y ago
      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.
jetz 16y ago
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.
- bherms 16y ago
  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 http://www.appelsiini.net/projects/lazyload
  - JoelSutherland 16y ago
    This would be perfect, but if you read the notice on the top of the page, it no longer works with current browsers.
    - bherms 16y ago
      Oops, had it in my list of useful links note in evernote. Haven't looked lately. There are others out there that work.
SkyMarshal 16y ago
Thanks for posting this, I was just thinking about this problem on a website I'm building. Very useful, though I also wish JS could do handle it.
acdha 16y ago
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.
nixme 16y ago
For that particular use case, check out http://tinysrc.net/ http://tinysrc.net/

Groxx 16y ago

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.

JoelSutherland 16y ago
That is effectively the same (but not quite as nice) as the solution I linked to. The problem is that I can't ask Joe Client to create placeholder divs. I want to handle it magically for him.
- Groxx 16y ago
  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.
  - JoelSutherland 16y ago
    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.

jetz 16y ago

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.

bherms 16y ago
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 http://www.appelsiini.net/projects/lazyload
- JoelSutherland 16y ago
  This would be perfect, but if you read the notice on the top of the page, it no longer works with current browsers.
  - bherms 16y ago
    Oops, had it in my list of useful links note in evernote. Haven't looked lately. There are others out there that work.

SkyMarshal 16y ago

Thanks for posting this, I was just thinking about this problem on a website I'm building. Very useful, though I also wish JS could do handle it.

acdha 16y ago

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.

nixme 16y ago

For that particular use case, check out http://tinysrc.net/ http://tinysrc.net/