0

我有两个代码片段

// 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();
});
  1. 如何使用代码确保图像在使用前已预加载？
  2. 如何触发通知说所有图像已预加载。我可以在这里使用任何新的 jQuery 1.8 功能吗？
  3. 代码片段一和二之间有什么区别。什么时候用？

一个小提琴的例子是最受赞赏的

这是我尝试在 div 中加载预加载图像的方式（图像库）

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

2 回答 2

1

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

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

尝试使用计数器。您增加每个 .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');
});​
于 2012-10-16T09:58:25.107 回答
0

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

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

于 2012-10-16T09:57:40.813 回答