Question

$.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..对我没用。感谢

Answer 1

这应该这样做：

$.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()。即使用户在其缓存中有图像，它仍将被调用（在这种情况下立即）。

Answer 2

我会做这样的事情

$.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

Answer 3

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

如果没有这个，.load方法就可以了。不知道为什么，可能是一些jquery bug。

等待使用ajax附加的图像已加载

3 个答案: