2012-04-20 33 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,那么哪一个更好取决于您是希望优化速度还是代码大小。

在技术层面上,有一个实际的实施差异。第二个版本将图像对象的数组保存在变量中。第一个让图像对象被垃圾收集。