4 ms·

Could someone explain to me why this is better/easier than just using CSS media queries myself? Also: > Whatever image you put inside the src of the image ele

Could someone explain to me why this is better/easier than just using CSS media queries myself? Also: > Whatever image you put inside the src of the image element will render by default. Then, the Javascript will progressively load larger images based on media queries that you pass into the data-interchange attribute. So, for larger screens, there would be many requests for a single image? For example, if I drop a mobile-optimized image into the src and then view the page on a retina macbook, wouldn't this mean many image requests from the "mobile" version up through "full-size retina"?

sp332 13y ago
So, for larger screens, there would be many requests for a single image? The demo page doesn't seem to work that way. In fact, if you resize the window gradually, it won't load new images at all. You have to wait for a second after resizing for it to bother loading the new image.
- disbelief 13y ago
  I see! So maybe it decides which media-query it should be using and then makes the one necessary request?
  - smileyj68 13y ago
    Correct.
- uptown 13y ago
  If you take a look at the Foundation source, the Interchange event responsible for swapping in/out images is setup with a 50 millisecond throttle. That's probably why you're seeing a slight delay. Additionally, they seem to also cache previously-loaded images to speed up future replacements. From a practical standpoint, this is designed to address device-specific uses where the screen-width is less-likely to experience size-adjustments than a desktop browser, so you'll probably see the initial HTTP request for the small-resolution image, followed by the HTTP request for the appropriately-sized image for whatever device/screen you're using, and you're less-likely to see the same number of requests made while wildly resizing a demo page.
robeasthope 13y ago
I'm guessing looks like it's built to solve the problems of serving HD images via a CMS? For static hand coded images media queries will suffice but once you start dynamically serving images it gets tricky fast, especially when faced with users that don't know/care about HD images issues. Combined with some code to scale images to the correct size on the fly (with caching, etc) I think it could be pretty useful.
smileyj68 13y ago
Poor wording - we match the media queries and the last valid match is loaded, not each in sequence. We'll make that clearer.

sp332 13y ago

So, for larger screens, there would be many requests for a single image? The demo page doesn't seem to work that way. In fact, if you resize the window gradually, it won't load new images at all. You have to wait for a second after resizing for it to bother loading the new image.

disbelief 13y ago
I see! So maybe it decides which media-query it should be using and then makes the one necessary request?
- smileyj68 13y ago
  Correct.
uptown 13y ago
If you take a look at the Foundation source, the Interchange event responsible for swapping in/out images is setup with a 50 millisecond throttle. That's probably why you're seeing a slight delay. Additionally, they seem to also cache previously-loaded images to speed up future replacements. From a practical standpoint, this is designed to address device-specific uses where the screen-width is less-likely to experience size-adjustments than a desktop browser, so you'll probably see the initial HTTP request for the small-resolution image, followed by the HTTP request for the appropriately-sized image for whatever device/screen you're using, and you're less-likely to see the same number of requests made while wildly resizing a demo page.

robeasthope 13y ago

I'm guessing looks like it's built to solve the problems of serving HD images via a CMS? For static hand coded images media queries will suffice but once you start dynamically serving images it gets tricky fast, especially when faced with users that don't know/care about HD images issues. Combined with some code to scale images to the correct size on the fly (with caching, etc) I think it could be pretty useful.

smileyj68 13y ago

Poor wording - we match the media queries and the last valid match is loaded, not each in sequence. We'll make that clearer.