怎样的JavaScript preloading工作？ [英] How does the javascript preloading work?
问题描述
我不想知道一种方法preLOAD图片，我发现很多上了网，但我想知道它是如何工作的。
如何JavaScript的能力preLOAD图像？
我的意思是，我试图从这里的一个片段，即使它的工作原理，它似乎没有preLOAD图像一样。
当我检查萤火虫，我可以看到图像加载了两次，一次而preloading，另一次显示它的时候！
要改善这种code我想知道它是如何工作的。
下面是我做的：
函数preLOAD（arrayOfImages）{
$（arrayOfImages）。每个（函数（）{
$（'＆LT; IMG /＆GT;'）[0] =的.src本;
//（新画面（））SRC =这一点;
警报（这+'和;＆放大器;'+ I ++）; }）;
}
然后我做这样的事情：
preloader =功能（）{
preLOAD（myImages）;
}$（文件）。就绪（preloader）;
这是我如何显示/添加图像：
$（li.works）。点击（函数（）{
。$（＃查看器），儿童（）空（）;
$（'＃观众'）儿童（）追加（。'＆LT; IMG SRC = \\'图像/ REF /+ this.firstChild.id +'JPG \\'ALT =+ this.firstChild.id +' \\ /＆GT;'）
$（＃查看器），儿童（）淡入（）。
您基本的JavaScript preloader做到这一点：
VAR形象=新的图像（）;
image.src ='/path/to/the/image.jpg';
它的工作原理是通过创建一个新的Image对象并设置它的SRC的方式，浏览器会去抓取的图像。我们不增加的这个的特定浏览器的形象，但在时机成熟时，以显示通过什么方法我们已经建立的页面图像，浏览器将已经在其高速缓存并不会再去取吧。我真的不能告诉你为什么不管你是不是不看code这种方式工作，虽然。
这是讨论的一个有趣的疑难杂症<一个href=\"http://stackoverflow.com/questions/761263/what-is-the-best-way-to-$p$pload-multiple-images-in-javascript\">in这个问题是发生了什么，当你有一个图像数组，并尝试$ P $使用相同的Image对象ploading他们都：
VAR图像= ['image1.jpg'，'image2.jpg'];
VAR图像=新的图像（）;
为（变量X = 0; X＆下; images.length; X ++）{
image.src =图像[X];
}
这只会preLOAD的最后一个图像的其余部分将没有时间preLOAD循环到来之前再次围绕改变对象的来源。 查看本的一个例子。你应该能立即看到第二图像，一旦你点击按钮，但第一个将加载，因为当你试图查看它没有得到一个机会，preLOAD。
因此，正确的方式做多一次将是：
VAR图像= ['image1.jpg'，'image2.jpg'];
为（变量X = 0; X＆下; images.length; X ++）{
VAR图像=新的图像（）;
image.src =图像[X];
}
I don't want to know a way to preload images, I found much on the net, but I want to know how it works. How is javascript able to preload images? I mean, I tried a snippet from here, and even if it works, it doesn't seem to preload images.
When I check firebug, I can see that the image is loaded twice, once while the preloading, another time when displaying it!
To improve this code I'd like to know how it works.
Here is what i do:
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
//(new Image()).src = this;
alert(this +' && ' + i++);
});
}
then i do something like that:
preloader = function() {
preload(myImages);
}
$(document).ready(preloader);
Here is how i display/add the image :
$("li.works").click(function() {
$("#viewer").children().empty();
$('#viewer').children().append('<img src=\'images/ref/'+this.firstChild.id+'.jpg\' alt="'+this.firstChild.id+'" \/>')
$("#viewer").children().fadeIn();
Your basic Javascript preloader does this:
var image = new Image();
image.src = '/path/to/the/image.jpg';
The way it works is simply by creating a new Image object and setting the src of it, the browser is going to go grab the image. We're not adding this particular image to the browser, but when the time comes to show the image in the page via whatever method we have setup, the browser will already have it in its cache and will not go fetch it again. I can't really tell you why whatever you have isn't working this way without looking at the code, though.
One interesting gotcha that is discussed in this question is what happens when you have an array of images and try preloading them all by using the same Image object:
var images = ['image1.jpg','image2.jpg'];
var image = new Image();
for(var x = 0; x < images.length; x++) {
image.src = images[x];
}
This will only preload the last image as the rest will not have time to preload before the loop comes around again to change the source of the object. View an example of this. You should be able to instantly see the second image once you click on the button, but the first one will have to load as it didn't get a chance to preload when you try to view it.
As such, the proper way to do many at once would be:
var images = ['image1.jpg','image2.jpg'];
for(var x = 0; x < images.length; x++) {
var image = new Image();
image.src = images[x];
}
这篇关于怎样的JavaScript preloading工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
