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

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，那么哪个更好取决于您是否要优化速度或代码大小。

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