jquery - 图像预加载 jquery

Question

我正在寻找使用 jQuery 预加载图像的最佳方式。

我试过使用这段代码，但它似乎不起作用:

    function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('<img/>')[0].src = this;
            // Alternatively you could use:
            // (new Image()).src = this;
        });
    }

    // Usage:

    preload([
        'img/preload.jpg'
    ]);

这是我的标记:

                <div class="item">
                    <img src="img/lookbook_item1.jpg" alt="lookbook_item1" width="187" height="259">
                </div>

                <div class="item">
                    <img src="img/lookbook_item1.jpg" alt="lookbook_item1" width="187" height="259">
                </div>

                <div class="item">
                    <img src="img/lookbook_item2.jpg" alt="lookbook_item2" width="383" height="259">
                </div>

我不想使用插件，只是一个可以执行淡入或类似操作的小脚本。

Answer 1

这样试试:

$.each( arrayOfImages, function( i, src ) {
  var img = new Image()
  img.src = src;
  img.load = function() {
    $("img[src=" + src + "]").fadeIn();
  };
});