最佳的预加载图片方式

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开发此应用程序时存在轻微延迟。

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

谢谢！

- FunkyMonk91

---

这是我之前回答中的一个短函数，用于预加载多张图片：https://dev59.com/Vl7Va4cB1Zd3GeqPGyOa#8450190。还有一个更高级的版本，当所有图片都预加载完成时提供回调功能：https://dev59.com/tl3Va4cB1Zd3GeqPCJ2W#8265310。 - jfriend00

除了我的答案之外，如果你的第一张图片是在开始时显示的，请将其从预加载器中排除掉。 - atmd

Answer 1

你可以尝试使用纯CSS图片预加载：

你可以尝试使用纯CSS图片预加载：

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

- kioopi

---

谢谢！我觉得这对于这个项目帮助不大，但是我肯定会记住这个以备将来之需！ - FunkyMonk91

Answer 2

任何形式的图像预加载都将使用相同的方法，与您和jfriend00的方法相同。即使使用jquery也是一样的。

您可以优化循环（捕获数组的长度等），但这只是小幅节省。

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

CSS精灵是否可选？

- atmd

---

不好意思，我们希望尽可能减少用户干预。理想情况下，我们只需将图像放入文件夹中，系统便会自动完成其余操作。谢谢！ - FunkyMonk91

好的，我明白了。看起来没有比你正在使用的更好的了。这些图片上传到CDN了吗？这样可以节省一些加载时间。 - atmd

Answer 3

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

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

- Vladimir Gordienko

---

这肯定会延迟加载，而不是预加载吧？ - atmd

它是一个跨浏览器的预加载脚本，请尝试更加专注地阅读。 - Vladimir Gordienko

但是你说要在Dom加载后加载图像，所以如果你在最后加载，那就不算真正的预加载，除非图像因某些用户事件而更改并排除默认/第一张图像。 - atmd

你实际上是不是通过向DOM添加和删除元素来损害性能？ - atmd

没有必要将图像插入到DOM中（即使不将其插入到DOM中，它们仍然会预加载），因此没有必要等待DOM加载，因为这只会延迟预加载的开始并使其花费更长时间。 - jfriend00