延迟加载HTML5图片代码 [英] Lazy Loading HTML5 picture tag

问题描述

在使用< picture> 的HTML5规范时，我一直在搜索（未成功）延迟加载图片的可靠方法。目前大多数解决方案/插件都依赖于使用 data - 属性。我可能是错的，但似乎这种方法不会与< picture> 一起使用。

<我真的只是想指向正确的方向。如果有人有他们正在使用的解决方案，我很乐意看到。谢谢！

更新：

这是HTML5规范的标准标记：

 < picture width =500height =500> 
< source media =（min-width：45em）src =large.jpg> 
< source media =（min-width：18em）src =med.jpg> 
< source src =small.jpg> 
< img src =small.jpgalt => 
< / picture> 
  

解决方案

对于任何仍感兴趣的人...
在重新审视这个问题之后，我遇到了一个名为 Lazysizes 的相当新的脚本。它实际上非常通用，但更重要的是它允许我在使用OP中描述的HTML5标记时进行延迟加载图像。

非常感谢这个创建者脚本， @aFarkas 。

I have been searching (unsuccessfully) for a reliable method to lazy load images while using the HTML5 spec for <picture>. Most solutions/plugins out there currently rely on using data- attributes. I could be wrong, but it doesn't seem this method will work in conjunction w/ <picture>.

I'm really just looking to be pointed in the right direction. If anyone has a solution that they're currently using, I'd love to see. Thanks!

UPDATE:
Here is standard markup per the HTML5 spec:

<picture width="500" height="500">
    <source media="(min-width: 45em)" src="large.jpg">
    <source media="(min-width: 18em)" src="med.jpg">
    <source src="small.jpg">
    <img src="small.jpg" alt="">
</picture>

解决方案

For anyone still interested... After revisiting this issue, I came across a fairly new script called, Lazysizes. It's actually quite versatile, but more importantly it allows me to do lazy loading of images while utilizing the HTML5 markup as described in the OP.

Much thanks to the creator of this script, @aFarkas.

这篇关于延迟加载HTML5图片代码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！