预加载画廊图像。 JavaScript（没有 JQuery）答案

【问题标题】：Preloading gallery images. JavaScript (without JQuery)预加载画廊图像。 JavaScript（没有 JQuery）
【发布时间】：2016-02-21 23:56:51
【问题描述】：

我正在尝试在画廊中使用一些大文件大小的图像。我试图以最简单的方式做到这一点。这里我只使用了一些示例图片：

var imageGallery = ["nebula.jpg", "galaxy.jpg", "blackHole.jpg"];

for (var i = 0; i < imageGallery.length - 1; i++) {
    var img = new Image();
    img.src = imageGallery[i];
}

我知道这段代码会确保图像在被脚本的其余部分使用之前被缓存，但它不起作用。

我们将不胜感激。

【问题讨论】：

哪部分工作不正常？
当我清除缓存后打开页面时，第一张图片立即开始加载，从上到下逐行加载，然后其他图片加载太快。加载完所有内容后，幻灯片将正常运行 - 但一开始就一团糟。

标签： javascript image preloading

【解决方案1】：

您正在寻找某种异步回调，您必须执行以下操作：

// Grab reference to image on page
var img = document.getElementById("blah");  // Or whatever you need to do

// Create new image from your list
var galleryImage = new Image();

// Create a callback that will start once you assign the src attribute to img 
galleryImage.onload = function() {

    // Here you could disable a loading icon or something, because your image is ready to go
    img.src = this.src;
}

// Kickoff everything
galleryImage.src = "www.myimage.com/path";

在您的代码中可能如下所示：

var imageGallery = ["nebula.jpg", "galaxy.jpg", "blackHole.jpg"];

for (var i = 0; i < imageGallery.length - 1; i++) {
    var img = document.document.getElementsByTagName('img')[i];
    var galleryImage = new Image();

    galleryImage.onload = function() {
        img.src = this.src;
    }

    galleryImage.src = imageGallery[i];
}

【讨论】：

谢谢。在这样的循环中创建一个函数可以吗？
肯定有很多时候你不想将异步函数放在这样的循环中，但在这种情况下它会很好。

【解决方案2】：

也许服务器正在发送阻止缓存的标头，例如：

Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

【讨论】：

谢谢。那会很奇怪。我还能做些什么来确保当我想显示这些图像时它们已经准备就绪？
@Jason210 还有 onload 功能可以帮助您确保它们都已加载，看看这个答案：stackoverflow.com/questions/12354865/…