懶惰加載<img>或背景圖像

Question

我有我的應用程序中的用戶列表，一個jQuery-UI accordion。它看起來不錯，但問題是，每個手風琴都包含用戶的頭像。

它曾經是一個之前，但現在我只是設置背景圖像。到目前爲止，網站上有很多用戶，由於這個頁面現在有1 MB的數據，我覺得我應該減少。

有沒有一種簡單的方法來確保圖像只有在瀏覽時才加載？

Answer 1

有jQuery的延遲加載插件， 這裏是http://www.appelsiini.net/projects/lazyload/enabled.html 你在找這樣的演示？

Answer 2

這樣的事情會起作用。如果是我，我會在DOM完成加載後加載它們。

$(this).on('click', function(event) { 
    var img = document.createElement('img'); 
    img.src = 'http://...'; // Whatever the source is. I would store it in as data attribute in 'this'. 
    this.appendChild(img); 
})