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

$.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/

Answer 2

Ich habe ein kleines Plugin, das dies erledigt.

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

Wenn Sie einfach nur laden wollten 何れも Bilder, einschließlich derer, auf die im CSS verwiesen wird, so geht man vor :)

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

Answer 3

Sie können Bilder mit Hilfe von css irgendwo in Ihr HTML laden display:none; Regel, dann zeigen Sie sie, wenn Sie wollen mit js oder jquery

Verwenden Sie keine js oder jquery-Funktionen zum Vorladen ist nur eine css-Regel Vs 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 durch Jquery/Javascript ist nicht gut, weil Bilder einige Millisekunden brauchen, um in die Seite geladen zu werden + Sie haben Millisekunden für das Skript, um geparst und ausgeführt zu werden, besonders dann, wenn es große Bilder sind, so dass das Verstecken in Hml auch für die Leistung besser ist, weil das Bild wirklich vorgeladen wird, ohne überhaupt sichtbar zu sein, bis Sie das zeigen!

Answer 4

Dieses Jquery imageLoader Plugin ist nur 1.39kb groß

Verwendung:

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

gibt es noch weitere Optionen, z. B. ob die Bilder synchron oder asynchron geladen werden sollen und ein komplettes Ereignis für jedes einzelne Bild.

Answer 5

Eine schnelle, Plugin-freie Möglichkeit, Bilder in jQuery vorzuladen und eine Callback-Funktion zu erhalten, ist die Erstellung mehrerer img Tags auf einmal und zählen Sie die Antworten, z. B.

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 den IE7 unterstützen wollen, 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();
        }
    });
}