Question

我在Nettuts上的tutorial comment（James）之后得到了这段代码，我想实现它。

预加载图像的教程方法很长，但我喜欢詹姆斯的缩短版本，但是，我已经尝试实现这个并且我没有做对。

似乎我需要先设置我的数组，然后循环遍历该数组，然后创建图像对象并加载它们。然而，当我检查我的Firebug时，我没有看到任何图像加载到缓存中。

$(function(){
      var imgArray = ['bghome01.jpg', 'bghome02.jpg', 'bghome03.jpg'];
        $.preload = function (imgArray) {
            $.each(imgArray, function () {
                alert(imgArray);
                (new Image()).src = 'Images/' + this;
            });
        };
    });

我很感激帮助！

Answer 1

就在这里，你是定义一个函数，但不是调用它：

$.preload = function (imgArray) {

如果您只想加载图片，可以将其缩小至：

$(function(){
  var imgArray = ['bghome01.jpg', 'bghome02.jpg', 'bghome03.jpg'];
  $.each(imgArray, function () {
    (new Image()).src = 'Images/' + this;
  });
});

或者，您可以使用原始方法执行此操作，函数定义可以在外部文件中，但在页面中您需要调用它，如下所示：

var imgArray = ['bghome01.jpg', 'bghome02.jpg', 'bghome03.jpg'];
$.preload(imgArray);

我认为这里的混淆来自imgArray作为数组和参数的名称，但这些是两个独立的东西，如果你给参数提供参数，可能会更加混乱$.preload一个不同的名字。

Answer 2

我的猜测是你没有保留图像对象，所以垃圾收集可能会在加载图像之前将它们丢弃。

请参阅此文章以获取一些代码：http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript

请注意，jQuery没有任何魔法;它最终都是JavaScript，所以你的代码肯定有问题。因此，如果保持图像对象不活动，那么this article可能会指向正确的方向。

Answer 3

如果我，浏览器我只会加载页面上的图像，所以我怀疑他的发生是因为你从未将图像添加到DOM。尝试使用style="visibility:hidden"设置创建新的img-tag并将其添加到DOM。

使用jQuery预加载图像

3 个答案: