Vorladen von Bildern mit jQuery

Question

Ich bin auf der Suche nach einem schnellen und einfachen Weg, um Bilder mit JavaScript vorzuladen. Ich bin mit jQuery, wenn das wichtig ist.

Ich habe dies hier gesehen ( http://nettuts.com... ) :

function complexLoad(config, fileNames) {
  for (var x = 0; x < fileNames.length; x++) {
    $("<img>").attr({
      id: fileNames[x],
      src: config.imgDir + fileNames[x] + config.imgFormat,
      title: "The " + fileNames[x] + " nebula"
    }).appendTo("#" + config.imgContainer).css({ display: "none" });
  }
};

Aber es sieht ein bisschen übertrieben aus für das, was ich will!

Ich weiß, es gibt jQuery-Plugins, die dies tun, aber sie alle scheinen ein bisschen groß (in der Größe); Ich brauche nur eine schnelle, einfache und kurze Art und Weise der Preload-Bilder!

Answer 1

Schnell und einfach:

function preload(arrayOfImages) {
    $(arrayOfImages).each(function(){
        $('<img/>')[0].src = this;
        // Alternatively you could use:
        // (new Image()).src = this;
    });
}

// Usage:

preload([
    'img/imageName.jpg',
    'img/anotherOne.jpg',
    'img/blahblahblah.jpg'
]);

Oder, wenn Sie ein jQuery-Plugin benötigen:

$.fn.preload = function() {
    this.each(function(){
        $('<img/>')[0].src = this;
    });
}

// Usage:

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

Answer 2

Hier ist eine optimierte Version der ersten Antwort, die tatsächlich lädt die Bilder in DOM und versteckt es standardmäßig.

function preload(arrayOfImages) {
    $(arrayOfImages).each(function () {
        $('<img />').attr('src',this).appendTo('body').css('display','none');
    });
}

Answer 3

JavaScript verwenden Bild-Objekt .

Mit dieser Funktion können Sie beim Laden aller Bilder einen Rückruf auslösen. Beachten Sie jedoch, dass sie niemals einen Callback auslöst, wenn nicht mindestens eine Ressource geladen ist. Dies kann leicht behoben werden, indem man die Funktion onerror Rückruf und Inkrementierung loaded Wert oder die Behandlung des Fehlers.

var preloadPictures = function(pictureUrls, callback) {
    var i,
        j,
        loaded = 0;

    for (i = 0, j = pictureUrls.length; i < j; i++) {
        (function (img, src) {
            img.onload = function () {                               
                if (++loaded == pictureUrls.length && callback) {
                    callback();
                }
            };

            // Use the following callback methods to debug
            // in case of an unexpected behavior.
            img.onerror = function () {};
            img.onabort = function () {};

            img.src = src;
        } (new Image(), pictureUrls[i]));
    }
};

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('a');
});

preloadPictures(['http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar', 'http://foo/picture.bar'], function(){
    console.log('b');
});

Answer 4

JP, nachdem ich Ihre Lösung überprüft hatte, hatte ich immer noch Probleme in Firefox, wo die Bilder nicht vorgeladen wurden, bevor die Seite geladen wurde. Ich entdeckte dies, indem ich einige sleep(5) in meinem serverseitigen Skript. Ich implementierte die folgende Lösung auf der Grundlage Ihrer, die scheint dies zu lösen.

Grundsätzlich habe ich einen Callback zu Ihrem jQuery Preload Plugin hinzugefügt, so dass es aufgerufen wird, nachdem alle Bilder ordnungsgemäß geladen sind.

// Helper function, used below.
// Usage: ['img1.jpg','img2.jpg'].remove('img1.jpg');
Array.prototype.remove = function(element) {
  for (var i = 0; i < this.length; i++) {
    if (this[i] == element) { this.splice(i,1); }
  }
};

// Usage: $(['img1.jpg','img2.jpg']).preloadImages(function(){ ... });
// Callback function gets called after all images are preloaded
$.fn.preloadImages = function(callback) {
  checklist = this.toArray();
  this.each(function() {
    $('<img>').attr({ src: this }).load(function() {
      checklist.remove($(this).attr('src'));
      if (checklist.length == 0) { callback(); }
    });
  });
};

Interessehalber verwende ich dies in meinem Zusammenhang wie folgt:

$.post('/submit_stuff', { id: 123 }, function(response) {
  $([response.imgsrc1, response.imgsrc2]).preloadImages(function(){
    // Update page with response data
  });
});

Hoffentlich hilft das jemandem, der über Google auf diese Seite kommt (so wie ich) und nach einer Lösung für das Vorladen von Bildern bei Ajax-Aufrufen sucht.

Answer 5

Dieser einzeilige jQuery-Code erstellt (und lädt) ein DOM-Element img, ohne es anzuzeigen:

$('<img src="img/1.jpg"/>');