Question

我有两个代码片段

// Code Snippet One
function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
    });
}

preload([
    'img/One.jpg',
    'img/Two.jpg',
    'img/Three.jpg'
]);

// Code Snippet Two
function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').hide();
});

如何使用代码确保图像在使用前已预先加载？
如何触发通知，说明所有图像都已预先加载。我可以在这里使用任何新的jQuery 1.8功能吗？
Code Snippet One和Two之间的区别是什么？哪个可以使用？

非常感谢小提琴的例子

以下是我尝试在div（图片库）

setTimeout(function() {
        $('.image-gallery').each(function(){
            // what to put here?
        });
}, 2000);

Answer 1

第一个示例将在内存中创建一个图像元素，并将其src更改为指向要预加载的图像。问题是某些浏览器（版本）不会开始加载图像，除非它们已添加到DOM中。这就是两个片段正在做的事情。

在这两种情况下，您都可以向jQuery图像对象添加.load()事件处理程序，以指定何时加载相应图像的回调。

尝试使用计数器。您在每个.load（）处理程序中增加计数器，如果它达到了图像计数，则所有图像都已完成加载。

编辑：改变这样的代码段

function preload(arrayOfImages, callback) {
    var counter = 0;    
    $(arrayOfImages).each(function () {
        $('<img />').load(function() {
            counter++;
            if(counter==arrayOfImages.length) callback();
        }).attr('src',this).appendTo('body').hide();
    });
}

并像这样称呼它

preload([
'img/One.jpg',
'img/Two.jpg',
'img/Three.jpg'
], function() {
    // what should happen when all of the images have been loaded
    $('<img />').attr('src', 'img/Two.jpg').appendTo('.image-gallery');
});

Answer 2

您是否考虑过Jquery Load event。它被弃用了，但没有人想出更好的替代品。它基本上会做你想要的。

一旦加载了图像，就会调用处理程序。

从概念上理解图像的预加载

2 个答案: