Vorladen von Bildern mit jQuery

Ich suche nach einer schnellen und einfachen Möglichkeit, Bilder mit JavaScript vorzuladen. Ich benutze jQuery, wenn das wichtig ist.

Ich habe das 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ß, dass es jQuery-Plugins gibt, die dies tun, aber sie scheinen alle etwas groß (in der Größe) zu sein. Ich brauche nur eine schnelle, einfache und kurze Möglichkeit, Bilder vorzuladen!

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 möchten:

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

// Usage:

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

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

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

Verwenden Sie ein JavaScript- Bildobjekt .

Mit dieser Funktion können Sie beim Laden aller Bilder einen Rückruf auslösen. Beachten Sie jedoch, dass niemals ein Rückruf ausgelöst wird, wenn mindestens eine Ressource nicht geladen ist. Dies kann leicht behoben werden, indem ein onerrorRückruf implementiert und der loadedWert erhöht oder der Fehler behandelt wird.

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

JP: Nachdem ich Ihre Lösung überprüft hatte, hatte ich immer noch Probleme in Firefox, bei denen die Bilder nicht vor dem Laden der Seite vorgeladen wurden. Ich habe dies entdeckt, indem ich einige sleep(5)in mein serverseitiges Skript eingefügt habe. Ich habe die folgende Lösung basierend auf Ihrer implementiert, die dies zu lösen scheint.

Grundsätzlich habe ich Ihrem jQuery-Preload-Plugin einen Rückruf hinzugefügt, damit es aufgerufen wird, nachdem alle Bilder ordnungsgemäß geladen wurden.

// 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(); }
    });
  });
};

Aus Interesse verwende ich dies in meinem Kontext wie folgt:

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

Hoffentlich hilft dies jemandem, der (wie ich) von Google auf diese Seite kommt, nach einer Lösung für das Vorladen von Bildern bei Ajax-Anrufen zu suchen.

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

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

$.fn.preload = function (callback) {
  var length = this.length;
  var iterator = 0;

  return this.each(function () {
    var self = this;
    var tmp = new Image();

    if (callback) tmp.onload = function () {
      callback.call(self, 100 * ++iterator / length, iterator === length);
    };

    tmp.src = this.src;
  });
};

Die Verwendung ist recht einfach:

$('img').preload(function(perc, done) {
  console.log(this, perc, done);
});

http://jsfiddle.net/yckart/ACbTK/

Ich habe ein kleines Plugin, das das erledigt.

Es heißt waitForImages und kann imgElemente oder jedes Element mit einem Verweis auf ein Bild im CSS verarbeiten, z div { background: url(img.png) }.

Wenn Sie einfach alle Bilder laden möchten, einschließlich derjenigen, auf die im CSS verwiesen wird, gehen Sie wie folgt vor :)

$('body').waitForImages({
    waitForAll: true,
    finished: function() {
       // All images have loaded.
    }  
});

Sie können Bilder mithilfe der CSS- display:none;Regel irgendwo in Ihr HTML laden und sie dann mit js oder jquery anzeigen, wenn Sie möchten

Verwenden Sie keine js- oder jquery-Funktionen zum Vorladen. Dies ist nur eine CSS-Regel. Es müssen viele Zeilen von js ausgeführt werden

Beispiel: HTML

<img src="someimg.png" class="hide" alt=""/>

CSS:

.hide{
display:none;
}

jQuery:

//if want to show img 
$('.hide').show();
//if want to hide
$('.hide').hide();

Das Vorladen von Bildern mit jquery / javascript ist nicht gut, da das Laden von Bildern auf Seite + einige Millisekunden dauert. Sie haben Millisekunden Zeit, um das Skript zu analysieren und auszuführen. Dies gilt insbesondere dann, wenn es sich um große Bilder handelt. Denn das Bild ist wirklich vorinstalliert, ohne überhaupt sichtbar zu sein, bis Sie das zeigen!

Dieses jquery imageLoader- Plugin ist nur 1,39 KB groß

Verwendungszweck:

$({}).imageLoader({
    images: [src1,src2,src3...],
    allcomplete:function(e,ui){
        //images are ready here
        //your code - site.fadeIn() or something like that
    }
});

Es gibt auch andere Optionen, z. B. ob Sie die Bilder synchron oder asychron laden möchten, und ein vollständiges Ereignis für jedes einzelne Bild.

Eine schnelle, Plugin-freie Möglichkeit, Bilder in jQuery vorzuladen und eine Rückruffunktion zu erhalten, besteht darin, mehrere imgTags gleichzeitig zu erstellen und die Antworten zu zählen, z

function preload(files, cb) {
    var len = files.length;
    $(files.map(function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

preload(["one.jpg", "two.png", "three.png"], function() {
    /* Code here is called once all files are loaded. */
});
​    ​

Beachten Sie, dass Sie, wenn Sie IE7 unterstützen möchten, diese etwas weniger hübsche Version verwenden müssen (die auch in anderen Browsern funktioniert):

function preload(files, cb) {
    var len = files.length;
    $($.map(files, function(f) {
        return '<img src="'+f+'" />';
    }).join('')).load(function () {
        if(--len===0) {
            cb();
        }
    });
}

Danke dafür! Ich würde gerne ein kleines Riff zur Antwort des JP hinzufügen - ich weiß nicht, ob dies jemandem helfen wird, aber auf diese Weise müssen Sie keine Reihe von Bildern erstellen, und Sie können alle Ihre großen Bilder vorab laden, wenn Sie dies tun Benennen Sie Ihre Daumen richtig. Dies ist praktisch, weil ich jemanden habe, der alle Seiten in HTML schreibt, und es stellt sicher, dass sie einen Schritt weniger tun müssen - das Erstellen des Bildarrays entfällt und ein weiterer Schritt, bei dem Dinge durcheinander geraten könnten.

$("img").each(function(){
    var imgsrc = $(this).attr('src');
    if(imgsrc.match('_th.jpg') || imgsrc.match('_home.jpg')){
      imgsrc = thumbToLarge(imgsrc);
      (new Image()).src = imgsrc;   
    }
});

Grundsätzlich erfasst es für jedes Bild auf der Seite den Quellcode jedes Bildes. Wenn es bestimmten Kriterien entspricht (ist ein Daumen oder ein Bild auf der Startseite), ändert es den Namen (eine grundlegende Zeichenfolge, die im Bild-Quellcode ersetzt wird) und lädt dann die Bilder .

In meinem Fall war die Seite voller Daumenbilder mit dem Namen image_th.jpg, und alle entsprechenden großen Bilder haben den Namen image_lg.jpg. Der zu große Daumen ersetzt nur das _th.jpg durch _lg.jpg und lädt dann alle großen Bilder vor.

Hoffe das hilft jemandem.

    jQuery.preloadImage=function(src,onSuccess,onError)
    {
        var img = new Image()
        img.src=src;
        var error=false;
        img.onerror=function(){
            error=true;
            if(onError)onError.call(img);
        }
        if(error==false)    
        setTimeout(function(){
            if(img.height>0&&img.width>0){ 
                if(onSuccess)onSuccess.call(img);
                return img;
            }   else {
                setTimeout(arguments.callee,5);
            }   
        },0);
        return img; 
    }

    jQuery.preloadImages=function(arrayOfImages){
        jQuery.each(arrayOfImages,function(){
            jQuery.preloadImage(this);
        })
    }
 // example   
    jQuery.preloadImage(
        'img/someimage.jpg',
        function(){
            /*complete
            this.width!=0 == true
            */
        },
        function(){
            /*error*/
        }
    )

Ich benutze den folgenden Code:

$("#myImage").attr("src","img/spinner.gif");

var img = new Image();
$(img).load(function() {
    $("#myImage").attr("src",img.src);
});
img.src = "http://example.com/imageToPreload.jpg";

Ich würde eine Manifest-Datei verwenden, um (modernen) Webbrowsern mitzuteilen, dass sie auch alle relevanten Bilder laden und zwischenspeichern sollen. Verwenden Sie Grunt und Grunt-Manifest, um dies automatisch zu tun, und sorgen Sie sich nie wieder um Preload-Skripte, Cache-Invalidatoren, CDN usw.

https://github.com/gunta/grunt-manifest

Das funktioniert bei mir sogar in IE9:

$('<img src="' + imgURL + '"/>').on('load', function(){ doOnLoadStuff(); });

Ich wollte dies mit einem benutzerdefinierten Overlay der Google Maps-API tun. Ihr Beispielcode verwendet einfach JS, um IMG-Elemente einzufügen, und das Bildplatzhalterfeld wird angezeigt, bis das Bild geladen wird. Ich habe hier eine Antwort gefunden, die für mich funktioniert hat: https://stackoverflow.com/a/10863680/2095698 .

$('<img src="'+ imgPaht +'">').load(function() {
$(this).width(some).height(some).appendTo('#some_target');
});

Dadurch wird ein Bild wie zuvor vorgeschlagen vorgeladen und anschließend mit dem Handler das img-Objekt angehängt, nachdem die img-URL geladen wurde. Die Dokumentation von jQuery warnt davor, dass zwischengespeicherte Bilder mit diesem Eventing- / Handler-Code nicht gut funktionieren, aber es funktioniert für mich in FireFox und Chrome, und ich muss mir keine Sorgen um den Internet Explorer machen.

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

.attr('src',value) nicht .attr('src',this)

nur um darauf hinzuweisen :)

5 Zeilen in Coffeescript

array = ['/img/movie1.png','/img/movie2.png','/img/movie3.png']

$(document).ready ->
  for index, image of array
    img[index] = new Image()
    img[index].src = image

Für diejenigen, die ein wenig ActionScript kennen, können Sie mit minimalem Aufwand nach Flash Player suchen und einen Flash Preloader erstellen, den Sie auch nach HTML5 / Javascript / Jquery exportieren können. Um zu verwenden, ob der Flash-Player nicht erkannt wird, überprüfen Sie Beispiele, wie dies mit der YouTube-Rolle zurück zum HTML5-Player gemacht wird :) Und erstellen Sie Ihren eigenen. Ich habe keine Details, da ich noch nicht angefangen habe. Wenn ich es nicht vergessen habe, werde ich es später veröffentlichen und werde einen Standard-JQuery-Code für meinen ausprobieren.