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

Question

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

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

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

Answer 1

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

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

Answer 2

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

Answer 3

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

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

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