3

I'm going for a lazy loading solution where an <img>'s src and srcset attributes are both set dynamically.

If an image has its src and srcset attributes both already present in the HTML (traditional), then a srcset-capable browser will safely ignore the src and only trigger one request, picked from the srcset list. (this guy says it works, but two requests being triggered from HTML was indeed a Chrome bug until recently.)

<img src=""
    data-lazy="fotos/000_180x120.jpg"
    data-lazy-srcset="fotos/000_180x120.jpg 180w,
    fotos/000_360x240.jpg 360w,
    fotos/000_720x480.jpg 720w,
    fotos/000_1080x720.jpg 1080w,
    fotos/000_1440x960.jpg 1440w,
    fotos/000_2160x1440.jpg 2160w"
    sizes="(min-width: 700px) 700px,
    100vw">

src is initially empty. In JavaScript both src and srcset attributes get set to the values in the data- attributes.

Now, unlike when the attributes are already set in the html, setting both attributes triggers two requests. This goes for whichever attribute is set first. It's understandable that setting src before setting srcset will already fire off one request.

What I want is to set srcset and then have a srcset-capable browser find its match, while ignoring the src attribute that is set afterwards and is meant as a fallback for other browsers.

Does anyone have experience with lazy-loading a srcset + fallback?

Community
  • 1
  • 1
Sephie
  • 331
  • 1
  • 3
  • 15

0 Answers0