在dom就绪时，从<img>'s，并在src属性中设置它们

On dom ready, get all data-src from <img>'s and set them in the src attribute

本文关键字：属性 src 并在 设置 img 就绪 dom lt gt      更新时间：2023-09-26

在一个页面中，我有这个：

<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准备好并且页面完全加载时，将数据src设置为src。

如果我这样做：console.log($('figure img').attr('data-src'))，我只得到第一个图像。所以它给了我结果：img1.png

那么，我怎么能说，当dom准备好将所有的图>img>数据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()来分离对最初选择的列表中每个元素的处理，以便执行的操作可以单独使用该元素。

$('figure > img').prop('src',function() {
    return $(this).attr('data-src');
});

或者使用getAttribute()会更快一点。

$('figure > img').prop('src',function() {
    return this.getAttribute('data-src');
});

如果您真的想删除data-src，那么将.removeAttr('data-src')链接到底。

$('figure > img').prop('src',function() {
    return this.getAttribute('data-src');
}).removeAttr('data-src');
相关文章：