预加载图片JavaScript

2024-05-20 • 问答

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

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

我真的不知道您要做什么。也许可以帮上忙吗？

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',error));
bod.appendChild(im.img('img3.png',error));
bod.appendChild(im.img('img4.png',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

预加载图片JavaScript

dongmiao008s 回答：预加载图片JavaScript

大家都在问