2012-04-20 13 views
5

Was ist eine bessere Möglichkeit, Bilder zu Last vor:effizienter Vorbelastung Bilder

$.each(['{{ MEDIA_URL }}jwplayer/jwplayer.js', 
     '{{ MEDIA_URL }}jwplayer/jwplayer.js.jgz', 
     '{{ MEDIA_URL }}jwplayer/player.swf'], function() { 
    $('<img/>')[0].src = this; 

oder:

var preloadImages = ['{{ MEDIA_URL }}jwplayer/jwplayer.js', 
        '{{ MEDIA_URL }}jwplayer/jwplayer.js.jgz', 
        '{{ MEDIA_URL }}jwplayer/player.swf']; 
var imgs = []; 
for (var i=0; i<preloadImages.length; i++) { 
    imgs[i] = new Image(); 
    imgs[i].src = preloadImages[i]; 
} 

Was man besser macht als die anderen?

+2

1. hat drei weniger Zeilen. –

+0

Kannst du sie nicht einfach vorab laden, indem du sie als IMG-Tags in einem versteckten div hast? oder ist dies für dynamisch hinzugefügte Elemente oder macht es mit js einen besseren Weg? – jammypeach

+1

Während die Antwort sehr wahrscheinlich # 2 aus den folgenden Gründen ist, wäre es eine gute Übung, wenn Sie dies selbst messen, indem Sie zwei HTML-Dateien erstellen, die die verschiedenen Methoden verwenden, um mehrere Dutzend oder sogar mehrere hundert Bilder zu laden. Sie können dies selbst messen, indem Sie firebug/yslow verwenden. – Moses

Antwort

7

Die zweite ist besser als die erste, weil es einfach JavaScript im Gegensatz zu den übermäßigen Bloatware von jQuery ist.

Sie können die zweite etwas verbessern, indem Sie l=preloadImages.length nach vorne setzen und diese in der Schleife verwenden.

+0

+1 für beide pure js und Schleifenoptimierung – jammypeach

+0

'Bloatware' ist ein wenig stark von jQuery im Allgemeinen, aber +1 dennoch: in diesem Fall mit jQuery ist sicherlich sinnlos aufgebläht. – jimw

+0

Ich stimme zu, dass einschließlich jQuery, nur um diese eine Aufgabe zu erledigen, Overkill ist, aber warum gehen Sie davon aus, dass es nicht auch für eine Menge anderer Dinge verwendet wird? – nnnnnn

1

Beide machen das gleiche. Das erste Snippet verwendet jQuery und das zweite nicht. Es gibt keinen Grund, jQuery ausschließlich für diesen Zweck zu verwenden. Wenn Sie die Bibliothek nicht anderweitig verwenden, sollten Sie die zweite Version verwenden. Wenn Sie jQuery auf Ihrer Website verwenden, ist auch die erste in Ordnung.

1

Die zweite ist schneller. Die erste ist weniger Eingabe (durch Verwendung einer Iterator-Methode auf höherer Ebene in jQuery).

Wenn Sie jQuery bereits aus anderen Gründen in Ihrem Projekt haben, hängt es davon ab, ob Sie lieber für Geschwindigkeit oder Code-Größe optimieren.

Auf technischer Ebene gibt es einen tatsächlichen Unterschied bei der Implementierung. Die zweite Version enthält ein Array der Bildobjekte in einer Variablen. Der erste lässt die Bildobjekte Müll sammeln.