Lazyloading图片元素

我正在寻找如何最好地延迟图片元素的建议。我可能想使用一个小的jQuery帮助函数来确定图片是否“在屏幕上”。但是，对于srcset的懒读取，我不确定现在该怎么做。那么，有什么想法？Lazyloading图片元素

下面是我正在使用的图片元素的一个示例。谢谢！

<picture alt="Random Celebrities" data-src="http://www.example.com/r/c_1,h_478,w_478/2015/03/19/random-celebrities-08-560x560.jpg"> 
    <!--[if IE 9]><video style="display: none;"><![endif]--> 
    <source class='picture-source-1260' srcset='http://www.example.com/r/c_1,h_239,w_239/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_478,w_478/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 1260px)'> 
    <source class='picture-source-960' srcset='http://www.example.com/r/c_1,h_180,w_180/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_360,w_360/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 960px)'> 
    <source class='picture-source-760' srcset='http://www.example.com/r/c_1,h_150,w_150/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_300,w_300/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 760px)'> 
    <source class='picture-source-450' srcset='http://www.example.com/r/c_1,h_210,w_210/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_420,w_420/2015/03/19/random-celebrities-08-560x560.jpg 2x' media='(min-width: 450px)'> 
    <source class='picture-source-320' srcset='http://www.example.com/r/c_1,h_160,w_160/2015/03/19/random-celebrities-08-560x560.jpg, http://www.example.com/r/c_1,h_320,w_320/2015/03/19/random-celebrities-08-560x560.jpg 2x'> 
    <!--[if IE 9]></video><![endif]--> 
    <noscript> 
     <img class="picture-img-noscript" src="http://www.example.com/r/c_1,h_160,w_160/2015/03/19/random-celebrities-08-560x560.jpg" alt="Random Celebrities" /> 
    </noscript> 
    <img class="picture-img" srcset="http://www.example.com/r/c_1,h_160,w_160/2015/03/19/random-celebrities-08-560x560.jpg" alt="Random Celebrities" /> 
</picture>

来源

2015-04-22 jerome

当我试图为这个问题添加标签“图片”或“图片元素”时，它将被转换为“图片”。但只是为了澄清，我特别看着延迟加载图片标签和srcset定义的图像。 – jerome

如果您想复制浏览器使用的整个过程并使用JavaScript（大概是为了能够添加某种类型的视觉过渡），那么浏览器会为您延迟加载图片元素，那么您不需要（也可能不应该）使用图片元素作为占位符。 – Adam

因此，一个图像元素“在折叠下方”或其他方式出现在视口外（在传送带等屏幕外）不会加载，直到它进入视口？ – jerome

使用lazysizes，它是用于正常和响应图像（包括图片元素）的高性能lazyloader。

来源

2015-04-22 22:36:18

感谢您的回复@alexander。那么我只需要将所有源标签中的srcset的所有实例都更改为data-srcset，并将类“lazyload”添加到img标签中？另外一个简单的问题是：可以使用RequireJS作为模块加载吗？ – jerome

是的，是的，你可以使用requireJS加载lazysizes。 lazysizes本身就是使用未命名的umd模块模式。 –

感谢您的快速回复，@alexander。欣赏拉奇利用UMD。标记为最佳答案。（但是我可能会问，如果我还有其他问题！） – jerome

Lazyloading图片元素

回答

相关问题