如何在加载其他所有内容后加载图像？

我有一些想法，在原始图像完成加载之前加载一个假图像，并在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

如何在加载其他所有内容后加载图像？

回答

相关问题