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];
    };

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

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

谢谢！

Answer 1

这是我以前的一个预先加载大量图片的答案中的一个简短函数：Is there a way to load images to user's cache asynchronously?和一个更高级的版本，可在预加载所有图像时提供回调：Image preloader javascript that supports events。

Answer 2

您可以尝试纯CSS图像预加载：

body:after {
  content: url("images/01.jpg") url("images/02.jpg");
  display: none;
}

Answer 3

任何形式的预加载图像都将使用与您和jfriend00相同的方法。即使使用jquery也会做同样的事情。

您可以优化循环（捕获数组的长度等），但它节省了一点。

你会看到更加明显的优化图像

CSS sprites是一个选项吗？

Answer 4

使用它。问一些你不明白的事情。

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.
        }
    }
});

预加载图像的最佳方式

4 个答案: