如何在加載其他所有內容後加載圖像？

我有一些想法，在原始圖像完成加載之前加載一個假圖像，並在winodws load.i後得到一些代碼，但不能理解在哪個部分我必須將src圖像放在假圖像和原始圖像中.do幫助我解決這個問題。我的HTML部分是如何在加載其他所有內容後加載圖像？

<div class="myimage"><img src="myimage.jpg" /></div>

注：關鍵是要設置src屬性，只有當該源在臨時img. $(img).load(fn);加載處理該。

$(function(){ 
     $.each(document.images, function(){ 
        var this_image = this; 
        var src = $(this_image).attr('src') || '' ; 
        if(!src.length > 0){ 
         //this_image.src = options.loading; // show loading........ 
         var lsrc = $(this_image).attr('lsrc') || '' ; 
         if(lsrc.length > 0){ 
          var img = new Image(); 
          img.src = lsrc; 
          $(img).load(function() { 
           this_image.src = this.src; 
          }); 
         } 
        } 
       }); 
     });

來源

2015-10-22 priyabrata

試試這個插件https://github.com/desandro/imagesloaded – AlexBerd

您可以使用data屬性做到這一點：

<div class="myimage"><img data-orig="original.jpg" src="fake.jpg" /></div> 

$(window).load(function(){ 
    $('.myimage img').attr("src", $(this).data('orig')).removeAttr('data-orig'); 
});

來源

2015-10-22 07:22:48 Afshin

感謝您的評論ü可以重新與HTML一起，其中包括original.jpg爲我寫的代碼和fake.jpg.can你改寫代碼。 @Afshin Haghighat – priyabrata

我爲你編輯的代碼 – Afshin

它不顯示原始圖像，除了load.gif雖然src替換爲data-src但加載圖像仍然保留@Afshin Haghighat – priyabrata

您可以將圖片的網址添加到自定義數據url屬性，讓你的圖片網址的base64的1x1 GIF圖片。然後，當頁面加載完成後，您可以從中獲取您的網址。基本上它會是這樣的。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-src="original-image.png" /> 

$(window).load(function() { 

    $("img").each(function() { 
    $(this).attr("src", $(this).attr("data-src")); 
    }); 
});

來源

2015-10-22 07:24:40 UmurAlpay

它不顯示原始圖像，除了load.gif雖然src替換數據-src但加載圖片仍然保留@UmurAlpay – priyabrata

如何在加載其他所有內容後加載圖像？

回答

相關問題