预加载图像 JavaScript

Question

我正在尝试使用Javascript预加载图像。我假设使用加载函数和模块化编码。我有下面的代码，但它似乎不起作用。任何建议将不胜感激。提前谢谢。

function preloadImages() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = "images/banner1.jpg";
img2.src = "images/banner2.jpg";
img3.src = "images/banner3.jpg";
}
}
function addLoadEvent(func) {
var loadImages = window.onload;
if (typeof window.onload != "function") {
window.onload = func;
} else {
window.onload = function() {
if (loadImages) {
loadImages();
}
func();
};
}
}
addLoadEvent(preloadImages);

Answer 1

我真的不知道你想做什么。也许这会有所帮助？

function ImgMaker(basePath){
this.img = function(url, doneFunc, errorFunc){
var img = new Image();
var b = basePath ? basePath.replace(/(\|/)$/) : '';
if(doneFunc)img.onload = doneFunc;
if(errorFunc)img.onerror = errorFunc;
img.src = b+url;
return img;
}
}
var doc, bod, im = new ImgMaker;
function noError(){
console.log(this.src+' loaded');
}
function error(){
console.log(this.src+" did't load");
}
addEventListener('load', function(){
doc = document; bod = doc.body;
bod.appendChild(im.img('img1.png', noError, error));
bod.appendChild(im.img('img2.png', noError, error));
bod.appendChild(im.img('img3.png', noError, error));
bod.appendChild(im.img('img4.png', noError, error));
bod.appendChild(im.img('img5.png', function(){
console.log(this.src+' loaded'); // showing anonymous way
// want async? load another image here
}, function(){
console.log(this.src+" didn't load");
}));
}); // end load