javascript - 加载其他内容后如何加载图像？

Question

我有一些想法，在原始图像完成加载之前在 div 上加载假图像，并在 winodws 加载之后加载。我得到了一些代码，但无法理解我必须在哪一部分中放置假图像和原始图像的 src 图像image.do 帮助我解决这段代码。 我的 html 部分是

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

注意:技巧是仅当源加载到临时 img 中时才设置 src 属性。 $(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');
});