DOM的准备，从<img>的得到所有数据-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

那么我该怎么说呢，什么时候准备好了所有的图> img> data-src设置为src的那个img。

所以从这个：

<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的已经明白 “数据 - ” 属性直接。因此，只要做到这一点：

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