3

我将寻求一个延迟加载解决方案，其中<img>'ssrc和srcset属性都是动态设置的。

如果图像的src和srcset属性都已经存在于 HTML（传统）中，那么支持 srcset 的浏览器将安全地忽略src并仅触发一个从 srcset 列表中挑选的请求。（这家伙说它有效，但是直到最近，从 HTML 触发的两个请求确实是一个Chrome 错误。）

<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最初是空的。在 JavaScript 中，src和srcset属性都设置为属性中的值data-。

现在，与已经在 html 中设置属性不同，设置这两个属性会触发两个请求。这适用于首先设置的任何属性。src设置之前的设置srcset已经触发了一个请求，这是可以理解的。

我想要的是设置srcset，然后让支持 srcset 的浏览器找到它的匹配项，同时忽略src之后设置的属性，该属性是其他浏览器的后备。

有没有人有延迟加载 srcset + fallback 的经验？

4

0 回答 0