Как загрузить изображения после загрузки всего остального?

Question

У меня есть идея, чтобы загрузить поддельное изображение на div перед загрузкой оригинального изображения, и что после загрузки windws load.i получил некоторый код, но не мог понять, в какой части я должен поместить изображение src для поддельного изображения и исходного изображения .do помогите мне в этом коде. мой HTML часть

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

Примечание: Trick это установить атрибут 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; 
          }); 
         } 
        } 
       }); 
     }); 

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 для пользовательского атрибута данных 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")); 
    }); 
});