更有效的预加载图像方式

More efficient way to pre-load images

本文关键字：图像 方式 加载 有效      更新时间：2023-09-26
什么是

预加载图像的更好方法：

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

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

第二个比第一个更好，因为它是普通的JavaScript，而不是jQuery过多的臃肿软件。

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

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

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

如果你的项目中已经有jQuery有其他原因，那么哪个更好取决于你是优化速度还是代码大小。

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

相关文章：