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

Question

我有一些想法，要在原始圖像完成加載之前在div上加載偽圖像，並且要在winodws加載之后加載div。幫我解決這段代碼。 我的html部分是

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

注意：技巧是僅在臨時img. $(img).load(fn);加載該源時設置src屬性img. $(img).load(fn); 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;
                           });
                       }
                   }
               });
      });

Answer 1

您可以使用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');
});

Answer 2

您可以將圖像url添加到自定義data-url屬性，並使圖像url為base64 1x1 gif。 然后，當頁面完全加載時，您可以從中獲取URL。 基本上就是這樣。

<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"));
   });
});