search

ahume / Responsive-Images

An Experiment with Content Aware Images that Scale Responsively
http://filamentgroup.com/examples/responsive-images/
47 stars 4 forks source link

Both images load (when larger image is required) #1

Closed paulrobertlloyd closed 13 years ago

paulrobertlloyd commented 13 years ago

When the image dimensions are calculated such that the larger image is deemed to be required, both the smaller and larger image are loaded. This provides a cool progressive loading effect, but kind of misses the point of the whole technique!

When viewing on a mobile device (an iPhone in this case) only the small image is loaded—as far as I can tell anyway. On larger screens both images are loaded in all browsers I've tested this on.

ahume commented 13 years ago

I think this is due to DOMLoaded being fired in some (webkit) browsers before the image requests are made. This means the cookie is deleted too early and the server returns to the small image instead of the 1x1 gif. I've possibly fixed this by calling the post load script on 'load' rather than 'domready'. Change is pushed to master here. See the diff if you want to add it straight to your own code.

https://github.com/ahume/Responsive-Images/commit/cb2b3d53496138897e35453eace78bbdf0d0a32b

paulrobertlloyd commented 13 years ago

This seems to fix the problem.

As a side tip, I've resized the rwd.gif image to a common ratio for images used on my site (9:5), so that the jump between showing the placeholder gif and the final image is less apparent.

Perhaps needs more testing, but for now marking as closed.