等待使用ajax加载的图像

$.post("service.php", { GetStartpageImages : true },function(data) { 

    $.each(data,function(i, value){ 

     var path = "uploads/thumb_" + value.Filename; 

     $('.startpage-images').append(
     '<div class="imagewrapper clearfix">' + 
      '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' + 
       '<img src="'+ path +'"/></a>' + 
       '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' + 
      '</a>' + 
     '</div>'); 

    }); 
});

如何在加载后显示它们？ $(window).load..没有为我工作。由于等待使用ajax加载的图像

来源

2011-12-15 Johan

这应做到：

$.post("service.php", { GetStartpageImages : true },function(data) { 

    $.each(data,function(i, value){ 

     var path = "uploads/thumb_" + value.Filename; 

     $('.startpage-images').append('<div class="imagewrapper clearfix">' + 
     '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' + 
      '<img src="'+ path +'"/></a>' + 
      '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' + 
     '</a>' + 
     '</div>'); 


     function imgLoadCallback(){ 
      $('.imagewrapper').show(); 
     } 

     var img = new Image(); 
     img.addEventListener('load', imgLoadCallback, false); 
     img.src = path; 


    }); 
});

上面的代码假设你的css中有.imagewrapper {display:none}。图像完全加载后，imgLoadCallback()将被调用。即使用户在缓存中有图片，它仍会被调用（在这种情况下，立即）。

来源

2011-12-15 23:04:32 maxedison

谢谢，但我不知道有什么区别：/ http://83.254.112.18/fotosida/ – Johan 2011-12-15 23:12:42

我会做这样的事情

$.each(data,function(i, value){ 
    var path = "uploads/thumb_" + value.Filename; 
    $('.startpage-images').append(
    '<div class="imagewrapper clearfix">' + 
     '<a class="imagelink" href="?p=photo&id=' + value.ID + '">' + 
     '<img data-src="'+ path +'"/></a>' + 
      '<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>' + 
      '</a>' + 
     '</div>'); 
}); 

$('.startpage-images img').each(function() { 
    $(this).attr("src", $(this).attr("data-src")); 
});

，所以我将设置ATTR data-src，并在年底将其设置为src

来源

2011-12-15 22:43:09

谢谢，但恐怕结果保持不变。链接：http://83.254.112.18/fotosida/。清除缓存并亲自查看。 – Johan 2011-12-15 22:46:15

'<div class="imageinfo alpha70">'+ value.UploadTimestamp +'</div>'

没有这个.load方法的工作。不知道为什么，可能是一些jQuery的bug。

来源

2011-12-15 23:29:23 Johan

等待使用ajax加载的图像

回答

相关问题