javascript预加载如何工作？

我不想知道一种预装图像的方法,我在网上发现了很多,但我想知道它是如何工作的.javascript如何预加载图片？我的意思是,我从这里尝试了一个片段,即使它有效,也似乎没有预装图像.

当我检查萤火虫时,我可以看到图像被加载两次,一次是预加载,另一次是显示它!

为了改进这段代码,我想知道它是如何工作的.

这是我做的:

 function preload(arrayOfImages) {
        $(arrayOfImages).each(function(){
            $('')[0].src = this;
            //(new Image()).src = this;
            alert(this +'  &&   ' + i++);

        });
    }

然后我做那样的事情:

preloader = function() {
    preload(myImages);
}

$(document).ready(preloader);

这是我显示/添加图像的方式:

$("li.works").click(function() {
             $("#viewer").children().empty();
             $('#viewer').children().append('')
             $("#viewer").children().fadeIn();

Paolo Bergan.. 11

您的基本Javascript预加载器执行此操作:

var image = new Image();
image.src = '/path/to/the/image.jpg';

它的工作方式只是创建一个新的Image对象并设置它的src,浏览器将抓住图像.我们没有将这个特定的图像添加到浏览器中,但是当我们通过我们设置的任何方法显示页面中的图像时,浏览器已经将它放在缓存中,并且不会再次获取它.我无法真正告诉你为什么你所拥有的不是在不看代码的情况下以这种方式工作.

在这个问题中讨论的一个有趣的问题是当你有一个图像数组并尝试使用相同的Image对象预加载它们时会发生什么:

var images = ['image1.jpg','image2.jpg'];
var image = new Image();
for(var x = 0; x < images.length; x++) {
    image.src = images[x];
}

这只会预加载最后一张图像,因为其余部分没有时间预先加载,然后再次循环来更改对象的源.查看此示例.单击按钮后,您应该能够立即看到第二个图像,但第一个图像必须加载,因为当您尝试查看它时,它没有机会预加载.

因此,一次完成许多工作的正确方法是:

var images = ['image1.jpg','image2.jpg'];
for(var x = 0; x < images.length; x++) {
    var image = new Image();
    image.src = images[x];
}

---

rism.. 5

Javascript预加载通过利用浏览器使用的缓存机制来工作.

基本思想是,一旦资源被下载,它就会在客户端机器上本地存储一段时间,这样浏览器就不必再从网络上再次检索资源,下次需要进行显示时/由浏览器使用.

您的代码可能正常工作,而您只是错误地处理Fire Bug正在显示的内容.

要测试这个理论,只需使用干净的缓存来访问www.google.com.即首先清除您的下载历史记录.

第一次通过一切可能会有200 OK的状态.这意味着您的浏览器请求资源和服务器发送它.如果你查看Fire Bug窗口的底部,它会显示页面有多大,说195Kb,以及从缓存中提取了多少.在这种情况下0Kb.

然后重新加载同一页面而不清除缓存,您仍然会在FireBug中看到相同数量的请求.

原因很简单.页面没有更改,仍然需要以前所需的所有相同资源.

不同的是,对于大多数这些请求,服务器返回304未修改状态,因此浏览器检查了它的缓存以查看它是否已经在本地存储了资源,在这种情况下它是从上一页加载完成的.所以浏览器只是从本地缓存中提取资源.

如果您查看Fire Bug窗口的底部,您会看到页面大小仍然相同(195Kb),但是大多数页面大小(在我的情况下为188Kb)是从缓存中本地提取的.

所以缓存确实有效,第二次我点击谷歌我节省了188Kb的下载量.

我相信你会在预装图像时发现同样的事情.仍然会发出请求,但如果服务器返回状态304,那么您将看到该图像实际上只是从本地缓存而不是网络中提取的.

因此,使用缓存,优势并不是你杀死所有未来的资源请求,即Uri查询仍然在网上进行,而是如果可能的话,浏览器将从本地缓存中提取以满足对内容的需求,而不是绕着网寻找它.

1> Paolo Bergan..：

---

您的基本Javascript预加载器执行此操作:

var image = new Image();
image.src = '/path/to/the/image.jpg';

它的工作方式只是创建一个新的Image对象并设置它的src,浏览器将抓住图像.我们没有将这个特定的图像添加到浏览器中,但是当我们通过我们设置的任何方法显示页面中的图像时,浏览器已经将它放在缓存中,并且不会再次获取它.我无法真正告诉你为什么你所拥有的不是在不看代码的情况下以这种方式工作.

在这个问题中讨论的一个有趣的问题是当你有一个图像数组并尝试使用相同的Image对象预加载它们时会发生什么:

var images = ['image1.jpg','image2.jpg'];
var image = new Image();
for(var x = 0; x < images.length; x++) {
    image.src = images[x];
}

这只会预加载最后一张图像,因为其余部分没有时间预先加载,然后再次循环来更改对象的源.查看此示例.单击按钮后,您应该能够立即看到第二个图像,但第一个图像必须加载,因为当您尝试查看它时,它没有机会预加载.

因此,一次完成许多工作的正确方法是:

var images = ['image1.jpg','image2.jpg'];
for(var x = 0; x < images.length; x++) {
    var image = new Image();
    image.src = images[x];
}

2> rism..：

---

Javascript预加载通过利用浏览器使用的缓存机制来工作.

基本思想是,一旦资源被下载,它就会在客户端机器上本地存储一段时间,这样浏览器就不必再从网络上再次检索资源,下次需要进行显示时/由浏览器使用.

您的代码可能正常工作,而您只是错误地处理Fire Bug正在显示的内容.

要测试这个理论,只需使用干净的缓存来访问www.google.com.即首先清除您的下载历史记录.

第一次通过一切可能会有200 OK的状态.这意味着您的浏览器请求资源和服务器发送它.如果你查看Fire Bug窗口的底部,它会显示页面有多大,说195Kb,以及从缓存中提取了多少.在这种情况下0Kb.

然后重新加载同一页面而不清除缓存,您仍然会在FireBug中看到相同数量的请求.

原因很简单.页面没有更改,仍然需要以前所需的所有相同资源.

不同的是,对于大多数这些请求,服务器返回304未修改状态,因此浏览器检查了它的缓存以查看它是否已经在本地存储了资源,在这种情况下它是从上一页加载完成的.所以浏览器只是从本地缓存中提取资源.

如果您查看Fire Bug窗口的底部,您会看到页面大小仍然相同(195Kb),但是大多数页面大小(在我的情况下为188Kb)是从缓存中本地提取的.

所以缓存确实有效,第二次我点击谷歌我节省了188Kb的下载量.

我相信你会在预装图像时发现同样的事情.仍然会发出请求,但如果服务器返回状态304,那么您将看到该图像实际上只是从本地缓存而不是网络中提取的.

因此,使用缓存,优势并不是你杀死所有未来的资源请求,即Uri查询仍然在网上进行,而是如果可能的话,浏览器将从本地缓存中提取以满足对内容的需求,而不是绕着网寻找它.