更高效的预加载图片方法

Question

更高效的预加载图片方法

5

如何更好地预加载图片：

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

or:

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

什么使得一种技术比另一种更好？

- David542

2

第一个只有三行少。 - Dean_Wilson

你能不能通过在隐藏的div中将它们作为img标签预加载它们？还是这是为了动态添加的元素，或者用js做更好？ - totallyNotLizards

1

虽然以下原因最有可能是答案2，但如果您创建两个使用不同方法加载几十甚至几百张图片的HTML文件，并使用Firebug/YSlow进行测量，那将是一个很好的练习。 - Moses

@moses，这是个非常好的想法。我想星期一我会试着玩一下。顺便说一句，我真的很喜欢YSlow，尽管我真的希望他们能够在Firefox发布新的主要版本时更快地更新它。当FF9发布时（或者是10？），它停止了数月。 - totallyNotLizards

3个回答

1

两者都可以实现相同的功能。第一个片段使用了jQuery，而第二个则没有。没有必要仅为此目的而专门使用jQuery，因此如果您在其他地方没有使用该库，请选择第二个版本。如果您在整个网站中都在使用jQuery，则第一个版本也可以。

- wsanville

1

第二个更快。第一个通过在jQuery中使用更高级别的迭代器方法来减少打字。

如果您已经在项目中使用jQuery进行其他操作，则哪种方法更好取决于您是更注重速度还是代码大小优化。

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

- jfriend00

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niet the Dark Absol · Accepted Answer

第二个比第一个更好，因为它是纯JavaScript而不是过度臃肿的jQuery。

你可以通过事先设置“l=preloadImages.length”并在循环中使用它来稍微改进第二个。