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

时间:2015-10-22 06:43:32

标签: javascript jquery html image css3

我有一个想法,在原始图像完成加载之前在div上加载假图像,并且在winodws load.i之后得到一些代码但是无法理解在哪个部分我必须将src图像放入假图像和原始图像image.do在这段代码中帮助我。 我的HTML部分是

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

注意:Trick是仅在该临时img. $(img).load(fn);句柄中加载该源时才设置src属性。

$(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;
                           });
                       }
                   }
               });
      });

2 个答案:

答案 0 :(得分:0)

您可以使用$( "#div_to_load_file_in" ).load( "path/to/your/file.html" ); 属性执行此操作:

data

答案 1 :(得分:0)

您可以将图片网址添加到自定义数据网址属性中,并将图片网址设为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"));
   });
});