2012-04-20 34 views
5

什麼是更好的方式來預先載入圖像:更有效的方式來預先載入圖像

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

或:

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]; 
} 

是什麼讓一個比其他更好嗎?

+2

第一個人有三條線。 – 2012-04-20 22:22:12

+0

不能你只是預先加載他們作爲img標籤在隱藏的div?或者這是爲了動態添加元素還是用js做更好的方法? – jammypeach 2012-04-20 22:22:47

+1

由於以下原因,最有可能的答案是#2,如果您自己通過創建兩個使用不同方法加載幾十個甚至幾百個圖像的html文件來測量它,這將是一個很好的練習。你可以使用firebug/yslow來自己測量。 – Moses 2012-04-20 22:30:12

回答

7

第二個比第一個更好,因爲它是純粹的JavaScript與jQuery的過度擴展軟件。

通過預先設置l=preloadImages.length並在循環中使用它,可以稍微改進第二個。

+0

對於純js和循環優化來說都是+1 – jammypeach 2012-04-20 22:23:34

+0

'bloatware'對jQuery有點強大,但是仍然有+1:在這種情況下,使用jQuery肯定是毫無意義的膨脹。 – jimw 2012-04-20 22:25:33

+0

我同意,包括jQuery只是爲了完成這一項任務是過度的,但爲什麼你會認爲它不是還用於一堆其他的東西? – nnnnnn 2012-04-20 22:30:33

1

兩者都做同樣的事情。第一個片段使用jQuery,第二個片段不。沒有理由將jQuery專門用於此目的,所以如果您不在其他地方使用庫,請使用第二個版本。如果你在整個網站中使用jQuery,那麼第一個也沒關係。

1

第二個更快。第一種是較少的鍵入(通過在jQuery中使用更高級別的迭代器方法)。

如果因爲其他原因您的項目中已經有jQuery,那麼哪一個更好取決於您是希望優化速度還是代碼大小。

在技術層面上,有一個實際的實施差異。第二個版本將圖像對象的數組保存在變量中。第一個讓圖像對象被垃圾收集。