预加载图像不起作用？ [英] preloading images not working?
问题描述
您好，
我仍有问题 - 如果答案在之前的
帖子中，请道歉！
我现在有，在标题中，
< sctipt>
var myimages = new Array（）;
函数preloadimages（）;
{
for（i = 0; i< preloadimages.arguments.length; i ++）
{
myimages [i] = new Image（）;
myimages [i] .src = preloadimages.arguments [i];
}
}
< / script>
和
< body
onload =" preloadimages（''before-and-after.gif''，''pic1.jpg''，''pic2.jpg''，
''pic3.jpg''，''pic4.jpg''，''pic5.jpg''，''pic6.jpg''，''pic7.jpg''）">
上面是第一页，其中只显示上面的第一张图片，
before-and-after.gif图片。
其余部分显示在第二页l标记为第一个并且使用数组显示
var picture = new Array（7）;
picture [ 0] =" pic1.jpg" ;;
picture [1] =" pic2.jpg" ;;
picture [2] =" pic3.jpg" ;;
picture [3] =" pic4.jpg";
picture [4] =" pic5.jpg";
picture [ 5] =" pic6.jpg";
picture [6] =" pic7.jpg" ;;
然后使用典型代码显示如下
document.getElementById（''picture''）。innerHTML
="< img src =" + window [" picture"] [situation_number] +">" ;;
我发现前3张jpg图片快速显示在
$中b $ b第二页（大概来自IE v6缓存），但其他4个只有在第二页到达它们的时候才会下载
显示。
我错了吗？我在哪里可以查看哪些图像（如果有的话）
已预先加载到浏览器缓存中？使用图片
阵列可能是错误的还是多余的？
干杯
Geoff
Hello,
I am still having problems - apologies if the answer is in previous
postings!
I now have, in the header,
<sctipt>
var myimages=new Array();
function preloadimages();
{
for (i=0;i<preloadimages.arguments.length;i++)
{
myimages[i]=new Image();
myimages[i].src=preloadimages.arguments[i];
}
}
</script>
and
<body
onload="preloadimages(''before-and-after.gif'',''pic1.jpg'',''pic2.jpg'',
''pic3.jpg'',''pic4.jpg'',''pic5.jpg'',''pic6.jpg'',''pic7. jpg'')">
The above is in the first page where only the first image above, the
before-and-after.gif image, is displayed.
The rest are displayed in the second page linked to the first and are
shown by using an array
var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";
and then displayed using typical code as follows
document.getElementById(''picture'').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";
I am finding that the first 3 jpg images are displayed quickly in the
second page (presumably from the IE v6 cache), but the others 4 are
only downloaded when the second page gets to the point where they are
to be displayed.
Am I wrong somewhere? Where can I look to see which images, if any,
have been preloaded into the browser cache? The use of the picture
array is possibly wrong or redundant??
Cheers
Geoff
推荐答案
嗨Geoff，
Hi Geoff,
Geoff Cox wrote:
你好，
我仍然遇到问题 - 如果答案在之前的帖子中，请道歉！
我现在在标题中，
< sctipt>
var myimages = new Array（）;
函数preloadimages（）;
{
for（i = 0; i< preloadimages。 arguments.length; i ++）
{
myimages [i] = new Image（）;
myimages [i] .src = preloadimages.arguments [i];
}
}
< / script>
< body
onload =" preloadimages（'''之前和之后。 gif''，''pic1.jpg''，''pic2.jpg''，
''pic3.jpg''，''pic4.jpg''，''pic5.jpg''，'' pic6.jpg''，''pic7.jpg''）">
对我来说，这种方法是多余的。整个目的是*预加载*
图像，而不是在页面加载后抓取图像。
以上是第一页只有第一张图片上面显示了
before-and-after.gif图像。
其余部分显示在链接到第一页的第二页中，并使用数组显示
var picture = new Array（7）;
picture [0] =" pic1.jpg" ;;
picture [1] =" pic2.jpg";
picture [2] =" pic3.jpg" ;;
picture [3] =" pic4.jpg" ;;
picture [4] =" pic5.jpg" ;;
picture [5] =" pic6.jpg" ;;
picture [6] =" pic7.jpg" ;;
然后使用典型代码显示如下
document.getElementById（''picture''）。innerHTML
="< img src =" + window [" picture"] [situation_number] +">" ;;
我发现前3张jpg图片在第二页快速显示（大概来自IE v6缓存），但其他4只是在第二页到达要显示的位置时才下载。
我错了吗？我在哪里可以查看哪些图像（如果有）已预先加载到浏览器缓存中？使用图片
数组可能是错误的还是多余的？
干杯
Geoff
Hello,
I am still having problems - apologies if the answer is in previous
postings!
I now have, in the header,
<sctipt>
var myimages=new Array();
function preloadimages();
{
for (i=0;i<preloadimages.arguments.length;i++)
{
myimages[i]=new Image();
myimages[i].src=preloadimages.arguments[i];
}
}
</script>
and
<body
onload="preloadimages(''before-and-after.gif'',''pic1.jpg'',''pic2.jpg'',
''pic3.jpg'',''pic4.jpg'',''pic5.jpg'',''pic6.jpg'',''pic7. jpg'')">
To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.
The above is in the first page where only the first image above, the
before-and-after.gif image, is displayed.
The rest are displayed in the second page linked to the first and are
shown by using an array
var picture = new Array(7);
picture[0] = "pic1.jpg";
picture[1] = "pic2.jpg";
picture[2] = "pic3.jpg";
picture[3] = "pic4.jpg";
picture[4] = "pic5.jpg";
picture[5] = "pic6.jpg";
picture[6] = "pic7.jpg";
and then displayed using typical code as follows
document.getElementById(''picture'').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";
I am finding that the first 3 jpg images are displayed quickly in the
second page (presumably from the IE v6 cache), but the others 4 are
only downloaded when the second page gets to the point where they are
to be displayed.
Am I wrong somewhere? Where can I look to see which images, if any,
have been preloaded into the browser cache? The use of the picture
array is possibly wrong or redundant??
Cheers
Geoff
尽量不要使用onload事件来预加载图像。相反，你可能想要这样尝试：
< script type =" type / javascript">
//将它放在HEAD标签之间
//预载图像
var myImages = new Array（）;
var n_images = 7;
//如果您知道要预加载的图像数量
for（var i = 0; i< n_images; ++ i）
{
myImages [i] =新图片（）;
//仅在图片有通用名称时才有用/>
myImages [i] .src =" path / pic" + i +" .jpg";
}
功能displayImages（）
{
var imgStr ="" ;;
for（var i = 0; i< n_images; ++ i）
{
imgStr + ="< img src =''" + myImages [i] .src +" />" ;;
}
document.getElementById（" picture"）。innerHTML = imgStr ;
}
window.onload = displayImages;
< / script>
在你的html正文中，你应该确保你有一个元素
，id为picture。
例如：
< body>
....
< div id =" picture">< / div> ;
....
< / body>
Try not to use the onload event to preload your images. Instead you
might want to try it this way:
<script type = "type/javascript">
//place this in between the HEAD tag
//preload images
var myImages = new Array();
var n_images = 7;
//if you know the number of images to preload
for(var i = 0; i < n_images; ++i)
{
myImages[i] = new Image();
//only useful if your pictures have a common name
myImages[i].src = "path/pic" + i + ".jpg";
}
function displayImages()
{
var imgStr = "";
for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src =''" + myImages[i].src + "/>";
}
document.getElementById("picture").innerHTML = imgStr;
}
window.onload = displayImages;
</script>
And in the body of your html, you should ensure you have an element
with the id "picture".
For example:
<body>
....
<div id = "picture"></div>
....
</body>
2005年9月14日11 ：12：41-0700，web.dev <我们******** @ gmail.com>写道：
On 14 Sep 2005 11:12:41 -0700, "web.dev" <we********@gmail.com> wrote:
< body
onload =" preloadimages（''before-and-after.gif''，''pic1 .jpg''，''pic2.jpg''，
''pic3.jpg''，''pic4.jpg''，''pic5.jpg''，''pic6.jpg''，' 'pic7.jpg''）">
对我来说，这种方法是多余的。整个目的是*预加载图像，而不是在页面加载后抓取图像。
<body
onload="preloadimages(''before-and-after.gif'',''pic1.jpg'',''pic2.jpg'',
''pic3.jpg'',''pic4.jpg'',''pic5.jpg'',''pic6.jpg'',''pic7. jpg'')">
To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.
您好，
我以为上面是预装!!它在做什么？
尽量不要使用onload事件来预加载你的图像。相反，你可能想要这样尝试：
我当然想尝试你的建议，但是当你写下这个
我应该有
< div id =" picture">< / div>
这可能很难？会发生什么是该页面以< body>中的
表开头。区域，然后使用
Javascript，使用
问题文本和特定情境的图像填充单元格。当问题得到解答时，下一个情况
图像和问题进入表等等使用以下
方法..
文件。 getElementById（''picture''）。innerHTML
="< img src =" + window [" picture"] [situation_number] +">" ;;
你会以这种方式编码吗？
干杯
Geoff
< script type =" type / javascript">
//将它放在HEAD标签之间
//预加载图片
var myImages = new Array（）;
var n_images = 7;
//如果您知道要预加载的图像数量
（var i = 0 ; i< n_images; ++ i）
{
myImages [i] = new Image（）;
//仅在您的图片有通用名称时才有用
myImages [ i] .src =" path / pic" + i +" .jpg";
}
功能displayImages（）
{
var imgStr ="" ;;
for（var i = 0; i< n_images; ++ i）
{
imgStr + ="< img src =''" + myImages [i] .src +" />" ;;
}
document.getElementById（" picture"）。innerHTML = imgStr;
}
window.onload = displayImages;
< / script>
在你的html正文中，你应该确保你有一个元素
例如：
< body>
...
< div id =" picture"> ;< / div>
...
< / body>
Hello,
I thought the above was pre-loading!! What is it doing?
Try not to use the onload event to preload your images. Instead you
might want to try it this way:
I would certainly like to try your suggestions but when you write that
I should have
<div id = "picture"></div>
this might be difficult? What happens is that the page starts with a
table in the <body> area, and then a cell is populated with the
question text and an image for a particular "situation", using
Javascript. When the question has been answered the next situation
image and question go into the table etc etc using the following
method ..
document.getElementById(''picture'').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";
Will you code work in this way?
Cheers
Geoff
<script type = "type/javascript">
//place this in between the HEAD tag
//preload images
var myImages = new Array();
var n_images = 7;
//if you know the number of images to preload
for(var i = 0; i < n_images; ++i)
{
myImages[i] = new Image();
//only useful if your pictures have a common name
myImages[i].src = "path/pic" + i + ".jpg";
}
function displayImages()
{
var imgStr = "";
for(var i = 0; i < n_images; ++i)
{
imgStr += "<img src =''" + myImages[i].src + "/>";
}
document.getElementById("picture").innerHTML = imgStr;
}
window.onload = displayImages;
</script>
And in the body of your html, you should ensure you have an element
with the id "picture".
For example:
<body>
...
<div id = "picture"></div>
...
</body>
Geoff Cox < GE ******* @ notquitecorrectfreeuk.com>在消息中写道
news：64 ******************************** @ 4ax.com ...
"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:64********************************@4ax.com...
2005年9月14日11:12:41 -0700，" web.dev" <我们******** @ gmail.com>写道：
On 14 Sep 2005 11:12:41 -0700, "web.dev" <we********@gmail.com> wrote:
< body
onload =" preloadimages（''before-and-after.gif''，''pic1 .jpg''，''pic2.jpg''，
''pic3.jpg''，''pic4.jpg''，''pic5.jpg''，''pic6.jpg''，' 'pic7.jpg''）">
对我来说，这种方法是多余的。整个目的是*预载*
图像，而不是在页面加载后抓取图像。
<body
onload="preloadimages(''before-and-after.gif'',''pic1.jpg'',''pic2.jpg'',
''pic3.jpg'',''pic4.jpg'',''pic5.jpg'',''pic6.jpg'',''pic7. jpg'')">
To me, this method is redundant. The whole purpose is to *preload* the
images, not to grab the images once the page has loaded.
你好，
我想以上是预加载!!它在做什么？
Hello,
I thought the above was pre-loading!! What is it doing?
一旦页面加载就会触发onload事件。
the onload event triggers once the page has been loaded.
尽量不要使用onload事件来预加载图像。相反，你可能想要这样尝试：
Try not to use the onload event to preload your images. Instead you
might want to try it this way:
我当然想尝试你的建议，但是当你写的时候我应该有
I would certainly like to try your suggestions but when you write that
I should have
< div id =" picture">< / div>
<div id = "picture"></div>
这可能很难吗？会发生什么是页面以< body>中的
表开头。区域，然后使用
Javascript，使用
问题文本和特定情境的图像填充单元格。当问题已经回答下一个情况
图像和问题进入表等等使用以下
方法..
this might be difficult? What happens is that the page starts with a
table in the <body> area, and then a cell is populated with the
question text and an image for a particular "situation", using
Javascript. When the question has been answered the next situation
image and question go into the table etc etc using the following
method ..
没问题只是修改你的javascript写出问题
写出div。
no problem just ammend your javascript which writes out the question to also
write out the div.
document.getElementById（''picture''）。innerHTML
=" ;< img src =" + window [" picture"] [situation_number] +">";
document.getElementById(''picture'').innerHTML
= "<img src=" + window["picture"][situation_number] + ">";
你会以这种方式编码吗？
Will you code work in this way?
是。
Yes.
这篇关于预加载图像不起作用？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
