在 dom 准备好后，从 获取所有 data-src 并将它们设置在 src 属性中

Question

在一个页面中我有这个：

<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 准备好所有数字时 >图像> 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>

Answer 1

从 1.4.3 左右版本开始，jQuery 已经直接理解“data-”属性。因此，只需这样做：

$('figure img').each(function() {
  this.src = $(this).data('src');
});

您必须使用 .each() 来分离最初选择的列表中每个元素的处理，以便您执行的操作可以单独使用该元素。

Answer 2

$('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');