更有效的预加载图像的方法

时间:2012-04-20 22:20:35

标签: javascript jquery

预加载图片的更好方法是什么:

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

是什么让一个人比另一个好?

3 个答案:

答案 0 :(得分:7)

第二个比第一个好,因为它是纯粹的JavaScript而不是jQuery的过度膨胀软件。

通过预先设置l=preloadImages.length并在循环中使用它,您可以稍微改进第二个。

答案 1 :(得分:1)

两者都做同样的事情。第一个片段是使用jQuery,第二个片段不是。没有理由专门为此目的使用jQuery,因此如果您不在其他地方使用该库,请使用第二个版本。如果您在整个网站中使用jQuery,那么第一个也可以。

答案 2 :(得分:1)

第二个更快。第一种是较少的输入(通过在jQuery中使用更高级别的迭代器方法)。

如果由于其他原因已经在项目中使用了jQuery,那么哪个更好取决于您是否要优化速度或代码大小。

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