5

我的页面上有一个 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 有一点延迟。

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

谢谢！

4

3 回答 3

3

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

body:after {
  content: url("images/01.jpg") url("images/02.jpg");
  display: none;
}
于 2012-10-19T18:42:53.257 回答
0

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

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

您会看到更明显的优化图像本身

CSS精灵是一种选择吗？

于 2012-10-19T18:30:41.370 回答
-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.
        }
    }
});
于 2012-10-19T18:30:26.423 回答