我正在尝试在画廊中使用一些大文件大小的图像。我正在尝试以最简单的方式做到这一点。这里我仅使用一些示例图像:
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];
}
我知道这段代码将确保图像在被脚本的其余部分使用之前被缓存,但它不起作用。
如果有帮助,我们将不胜感激。
最佳答案
您正在寻找某种异步回调,您必须执行以下操作:
// 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];
}
关于javascript - 预加载图库图像。 JavaScript(无 JQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35543710/