预加载图像的最佳方式

Question

我的页面上有一个img标记,它从这个数组中提供不同的源:

    preload_image_object = new Image();
    var images = new Array();
    images[0] = "images/01.jpg";
    images[1] = "images/02.jpg";
    images[2] = "images/03.jpg";
    images[3] = "images/04.jpg";
    images[4] = "images/05.jpg";

    //Preload images for faster page response
    for (var i=0; i < images.length; i++) {
        preload_image_object.src = images[i];
    };

我一次只显示一个图像,但我发现它们非常大(每个几个megs).我需要这些最初加载,以便当我转到下一个图像时它会出现.目前我正在开发这款产品的iPad略有延迟.

预加载这些图像的最佳方法是什么？

谢谢!

Answer 1

这是我以前的一个预加载大量图像的答案中的一个简短函数:有没有办法异步加载图像到用户的缓存？还有一个更高级的版本,可在预加载所有图像时提供回调:支持事件的图像预加载器javascript.

Answer 2

用这个。如果有什么不明白的地方就问。

jQuery(document).ready(function () {           
    preload([
        'path to img 1',
        'path to img 2',
        .... array of all images

    ]);

    function preload(images) {
        if (typeof document.body == "undefined") return;
        try {    
            var div = document.createElement("div");
            var s = div.style;
            s.position = "absolute";
            s.top = s.left = 0;
            s.visibility = "hidden";
            document.body.appendChild(div);
            div.innerHTML = "<img src=\"" + images.join("\" /><img src=\"") + "\" />";
            var lastImg = div.lastChild;
            lastImg.onload = function () {
                document.body.removeChild(document.body.lastChild);
            };
        }
        catch (e) {
            // Error. Do nothing.
        }
    }
});