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