我一直在寻找可靠的方法来懒加载图像,同时使用HTML5规范的<picture>
。目前大多数解决方案/插件都依赖于使用data-
属性。我可能错了,但似乎这种方法不适用于与<picture>
一起使用。
我只是想被指引正确的方向。如果有人有正在使用的解决方案,我很想看看。谢谢!
以下是符合HTML5规范的标准标记:
<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>
<pictures>
(以及为什么那样不起作用)? - Bergi<source>
元素一起使用,而不是使用img的src
属性。 - Bergi<picture>
标签,但最有可能的是在html解析期间加载适当的图像(就像它们目前为<img>
标签所做的那样),因此停止它的唯一方法是在<source>
标签中使用data-src
属性而不是src
。但即使在这种情况下也存在一些问题,因此在LazyLoadXT中,我们开始使用<br>
标签而不是<source>
:http://ressio.github.io/lazy-load-xt/demo/picture.htm(我不记得`<source>标签存在什么问题,但在某些浏览器中无法正常工作,而
<br>`可以)。 - Denis Ryabov<br>
标签了! - MrRay<source>
标签的问题在于旧浏览器不知道这个标签是自闭合的,并生成类似<picture><source><source><source></source></source></source></picture>
的嵌套DOM,这样的结构会破坏插件的工作。也许可以修复这个问题,但更简单的方法是将<source>
替换为所有浏览器都支持的<br>
。 - Denis Ryabov