在一个页面中我有这个:
<figure><img src="" data-src="img1.png"></figure>
<figure><img src="" data-src="img2.png"></figure>
<figure><img src="" data-src="img3.png"></figure>
<figure><img src="" data-src="img4.png"></figure>
然后继续。
我试图在不使用 jquery 插件的情况下进行异步加载,并使其尽可能简单。
所以我想,当dom准备好并且页面完全加载时,将data-src设置为src。
如果我这样做:console.log($('figure img').attr('data-src'))
我只得到第一张图片。所以它给了我结果:img1.png
所以我怎么说,当 dom 准备好所有图形 > img > data-src 以设置为该 img 的 src。
从这里开始:
<figure><img src="" data-src="img1.png"></figure>
<figure><img src="" data-src="img2.png"></figure>
<figure><img src="" data-src="img3.png"></figure>
<figure><img src="" data-src="img4.png"></figure>
为此:
<figure><img src="img1.png"></figure>
<figure><img src="img2.png"></figure>
<figure><img src="img3.png"></figure>
<figure><img src="img4.png"></figure>
最佳答案
从 1.4.3 左右的版本开始,jQuery 直接理解了“data-”属性。所以就这样做:
$('figure img').each(function() {
this.src = $(this).data('src');
});
您必须使用 .each()
来分离初始选择列表中每个元素的处理,以便您执行的操作可以单独使用该元素。
关于javascript - 在 dom 准备好后,从 <img> 获取所有数据源并将它们设置在 src 属性中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9089299/