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

Vielen Dank dafür! Ich würde gerne eine kleine Ergänzung zur Antwort von J-P hinzufügen - ich weiß nicht, ob das jemandem hilft, aber auf diese Weise müssen Sie kein Array von Bildern erstellen und können alle großen Bilder vorladen, wenn Sie Ihre Daumen richtig benennen. Das ist praktisch, weil ich jemanden habe, der alle Seiten in Html schreibt, und es sorgt für einen Schritt weniger für sie zu tun - Beseitigung der Notwendigkeit, das Bild-Array zu erstellen, und ein weiterer Schritt, wo Dinge vermasselt werden könnte.

$("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 für jedes Bild auf der Seite greift es die src jedes Bildes, wenn es bestimmte Kriterien erfüllt (ist ein Thumb oder Homepage-Bild) ändert es den Namen (eine einfache Zeichenfolge ersetzen in das Bild src), dann lädt die Bilder.

In meinem Fall war die Seite voll mit Miniaturbildern, die alle den Namen image_th.jpg trugen, und die entsprechenden großen Bilder hießen image_lg.jpg. Die Funktion "thumb to large" ersetzt einfach die Datei _th.jpg durch _lg.jpg und lädt dann alle großen Bilder vor.

Ich hoffe, das hilft jemandem.

Answer 2

    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*/
        }
    )

Answer 3

Ich verwende 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";

Answer 4

Ich würde eine Manifestdatei verwenden, um (modernen) Webbrowsern mitzuteilen, dass sie auch alle relevanten Bilder laden und in den Cache stellen sollen. Verwenden Sie Grunt und grunt-manifest, um dies automatisch zu tun und nie wieder Sorgen über Preload-Skripte, Cache-Invalidatoren, CDN usw.

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

Answer 5

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

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

nur um darauf hinzuweisen :)