根据 ajax 请求预加载图像

Question

我正在运行一个脚本，该脚本从 ajax 请求加载图像和数据，然后将其显示在我的 Blocksit 画廊（砌体画廊的 jquery 插件）中。问题 div 是在实际加载图像之前创建的，因此它们无法正确放置在图库中。我需要以某种方式保存数据，加载它，然后运行该函数来显示图库。我曾尝试使用 setTimout，但显然没有运气。这是我的代码：

("#loadMore").click(function(){
    $.ajax({
        url: "loadMore.php",
        data: {count: count,
               type: type},
        type: "POST",
        success: function(html){
            var data = jQuery.parseJSON(html);
            if (data.html == "stop"){

            }
            else{
                setTimeout(function() {
                    $('#container').append(data.html);
                    $('#container').BlocksIt({
                        numOfCol: 3,
                        offsetX: 5,
                        offsetY: 5
                    });


                }, 2000);
                $('html, body').animate({ scrollTop: $(document).height()-$(window).height() }, 500, "linear");
                count = $(".grid").length;
            }          
        }
    });
});

非常感谢任何帮助:)

Answer 1

尝试使用以下步骤 -

创建 dom

$('<img/>')[0].src = /* ur url */;

然后运行代码 onLoad 事件

$('img').load(function(){
 // your code 
});

实际上浏览器足够聪明，直到数据没有添加到 dom 中它才会加载.....它甚至不关心你设置了多少时间超时，所以尝试创建 dom 然后加载 img将其插入正确的位置