Предварительная загрузка изображений 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