预加载图像的最佳方式 [英] Best way to preload images
本文介绍了预加载图像的最佳方式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
预加载图片的最佳方法是什么？我正在尝试创建一个大约有59个图像的图像标签。这是我到目前为止的代码：
What's the best way to preload images? I'm trying to create an image tab that has around 59 png images. Here's the code I have so far:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>Checklist</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="/systems_hr/Style%20Library/globalstyles_test.css">
<style type="text/css">
#innerframe {
width: 100%;
height: 63em;
}
</style>
<script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/styles.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script>
<script type="text/javascript">
var id1 = new Image();
id1.src = "images/id1.png";
var id11 = new Image();
id11.src = "images/id1-1.png";
var id12 = new Image();
id12.src = "images/id1-2.png";
var id13 = new Image();
id13.src = "images/id1-3.png";
var id2 = new Image();
id2.src = "images/id2.png";
var id21 = new Image();
id21.src = "images/id2-1.png";
var id22 = new Image();
id22.src = "images/id2-2.png";
var id23 = new Image();
id23.src = "images/id2-3.png";
var id3 = new Image();
id3.src = "images/id3.png";
var id31 = new Image();
id31.src = "images/id3-1.png";
var id32 = new Image();
id32.src = "images/id3-2.png";
var id33 = new Image();
id33.src = "images/id3-3.png";
var id4 = new Image();
id4.src = "images/id4.png";
var id41 = new Image();
id41.src = "images/id4-1.png";
var id42 = new Image();
id42.src = "images/id4-2.png";
var id43 = new Image();
id43.src = "images/id4-3.png";
var iw1 = new Image();
iw1.src = "images/iw1.png"
var iw11 = new Image();
iw11.src = "images/iw1-1.png"
var iw12 = new Image();
iw12.src = "images/iw1-2.png"
var iw13 = new Image();
iw13.src = "images/iw1-3.png"
var iw14 = new Image();
iw14.src = "images/iw1-4.png"
var iw2 = new Image();
iw2.src = "images/iw2.png"
var iw21 = new Image();
iw21.src = "images/iw2-1.png"
var iw22 = new Image();
iw22.src = "images/iw2-2.png"
var iw23 = new Image();
iw23.src = "images/iw2-3.png"
var iw24 = new Image();
iw24.src = "images/iw2-4.png"
var iw3 = new Image();
iw3.src = "images/iw3.png"
var iw31 = new Image();
iw31.src = "images/iw3-1.png"
var iw32 = new Image();
iw32.src = "images/iw3-2.png"
var iw33 = new Image();
iw33.src = "images/iw3-3.png"
var iw34 = new Image();
iw34.src = "images/iw3-4.png"
var iw4 = new Image();
iw4.src = "images/iw4.png"
var iw41 = new Image();
iw41.src = "images/iw4-1.png"
var iw42 = new Image();
iw42.src = "images/iw4-2.png"
var iw43 = new Image();
iw43.src = "images/iw4-3.png"
var iw44 = new Image();
iw44.src = "images/iw4-4.png"
var im1 = new Image();
im1.src = "images/im1.png"
var im11 = new Image();
im11.src = "images/im1-1.png"
var im12 = new Image();
im12.src = "images/im1-2.png"
var im13 = new Image();
im13.src = "images/im1-3.png"
var im2 = new Image();
im2.src = "images/im2.png"
var im21 = new Image();
im21.src = "images/im2-1.png"
var im22 = new Image();
im22.src = "images/im2-2.png"
var im23 = new Image();
im23.src = "images/im2-3.png"
var im3 = new Image();
im3.src = "images/im3.png"
var im31 = new Image();
im31.src = "images/im3-1.png"
var im32 = new Image();
im32.src = "images/im3-2.png"
var im33 = new Image();
im33.src = "images/im3-3.png"
function changeFrame (frameSRC)
{
var myFrame = document.getElementById('fraContent');
myFrame.contentWindow.location = frameSRC;
}
function rolloverArea(area, orgImgSrc, tgtImgSrc, orgCursor, tgtCursor) // jQuery script for rollover effect
{
$("#imgTab").attr("src", orgImgSrc);
$(area).hover(
function()
{
$("#imgTab").attr("src", tgtImgSrc);
$("#imgTab").css("cursor",tgtCursor);
},
function()
{
$("#imgTab").attr("src", orgImgSrc);
$("#imgTab").css("cursor",orgCursor);
}
);
}
/*function initLoad ()
{
}*/
function changeImgState(img) // tab interface of Day Week and Month arrows
{
var myImgTab = document.getElementById("imgTab");
switch (img)
{
case 'id1':
myImgTab.src = id1.src;
// Rollover effect for the image
rolloverArea("#area1",id1.src,id1.src,"auto","auto");
rolloverArea("#area2",id1.src,id11.src,"auto","pointer");
rolloverArea("#area3",id1.src,id12.src,"auto","pointer");
rolloverArea("#area4",id1.src,id13.src,"auto","pointer");
rolloverArea("#area5",id1.src,id1.src,"auto","auto");
// onClick effect
$("#area2").click(function() {
$("#innerframe").attr("src","D2.html");
changeImgState("id2");
}
);
$("#area3").click(function() {
$("#innerframe").attr("src","D3.html");
changeImgState("id3");
}
);
$("#area4").click(function() {
$("#innerframe").attr("src","D4.html");
changeImgState("id4");
}
);
break;
case 'id2':
myImgTab.src = id2.src;
// Rollover effect for the image
rolloverArea("#area1",id2.src,id21.src,"auto","pointer");
rolloverArea("#area2",id2.src,id2.src,"auto","auto");
rolloverArea("#area3",id2.src,id22.src,"auto","pointer");
rolloverArea("#area4",id2.src,id23.src,"auto","pointer");
rolloverArea("#area5",id2.src,id2.src,"auto","auto");
// onClick effect
$("#area1").click(function() {
$("#innerframe").attr("src","D1.html");
changeImgState("id1");
}
);
$("#area3").click(function() {
$("#innerframe").attr("src","D3.html");
changeImgState("id3");
}
);
$("#area4").click(function() {
$("#innerframe").attr("src","D4.html");
changeImgState("id4");
}
);
break;
case 'id3':
myImgTab.src = id3.src;
// Rollover effect for the image
rolloverArea("#area1",id3.src,id31.src,"auto","pointer");
rolloverArea("#area2",id3.src,id32.src,"auto","pointer");
rolloverArea("#area3",id3.src,id3.src,"auto","auto");
rolloverArea("#area4",id3.src,id33.src,"auto","pointer");
rolloverArea("#area5",id3.src,id3.src,"auto","auto");
// onClick effect
$("#area1").click(function() {
$("#innerframe").attr("src","D1.html");
changeImgState("id3");
}
);
$("#area2").click(function() {
$("#innerframe").attr("src","D2.html");
changeImgState("id2");
}
);
$("#area4").click(function() {
$("#innerframe").attr("src","D4.html");
changeImgState("id4");
}
);
break;
case 'id4':
myImgTab.src = id4.src;
// Rollover effect for the image
rolloverArea("#area1",id4.src,id41.src,"auto","pointer");
rolloverArea("#area2",id4.src,id42.src,"auto","pointer");
rolloverArea("#area3",id4.src,id43.src,"auto","pointer");
rolloverArea("#area4",id4.src,id4.src,"auto","auto");
rolloverArea("#area5",id4.src,id4.src,"auto","auto");
// onClick effect
$("#area1").click(function() {
$("#innerframe").attr("src","D1.html");
changeImgState("id3");
}
);
$("#area2").click(function() {
$("#innerframe").attr("src","D2.html");
changeImgState("id2");
}
);
$("#area4").click(function() {
$("#innerframe").attr("src","D4.html");
changeImgState("id4");
}
);
break;
case 'iw1':
myImgTab.src = iw1.src;
rolloverArea("#area1",iw1.src,iw1.src,"auto","auto");
rolloverArea("#area2",iw1.src,iw11.src,"auto","pointer");
rolloverArea("#area3",iw1.src,iw12.src,"auto","pointer");
rolloverArea("#area4",iw1.src,iw13.src,"auto","pointer");
rolloverArea("#area5",iw1.src,iw14.src,"auto","pointer");
break;
case 'im1':
myImgTab.src = im1.src;
rolloverArea("#area1",im1.src,im1.src,"auto","auto");
rolloverArea("#area2",im1.src,im11.src,"auto","pointer");
rolloverArea("#area3",im1.src,im12.src,"auto","pointer");
rolloverArea("#area4",im1.src,im13.src,"auto","pointer");
rolloverArea("#area5",im1.src,im1.src,"auto","auto");
break;
}
}
function changeTab(tab)
{
switch(tab)
{
case 'day1':
var myTab = document.getElementById("day1");
document.getElementById("week1").className = "active";
document.getElementById("month1").className = "active";
myTab.className = "current";
changeImgState("id1");
$("#innerframe").attr("src","D1.html");
break;
case 'week1':
document.getElementById("day1").className = "active";
document.getElementById("month1").className = "active";
document.getElementById("week1").className = "current";
changeImgState("iw1");
$("#innerframe").attr("src","W1.html");
break;
case 'month1':
document.getElementById("week1").className = "active";
document.getElementById("day1").className = "active";
document.getElementById("month1").className = "current";
changeImgState("im1");
$("#innerframe").attr("src","M1.html");
break;
}
}
function test(tab)
{
alert(document.getElementById.id + " " + document.getElementById(tab).className)
}
</script>
</head>
<body onload="changeTab('day1');">
<table border="0" width="100%">
<tr>
<td colspan="2" align="left">
<div id="navcontainer">
<ul id="navlist">
<li><a class="active" id="day1" onclick="changeTab('day1');">FIRST DAY</a></li>
<li><a class="active" id="week1" onclick="changeTab('week1');">FIRST WEEK</a></li>
<li><a class="active" id="month1" onclick="changeTab('month1');">FIRST 30-DAYS</a></li>
</ul>
</div>
<div id="page_viewer">
<table border="0" width="1020px" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="" style="border: 0px; width: 1000px; height: 72px;" alt="" usemap="#imgTabMap" name="imgTab" id="imgTab">
<map id="imgTabMap" name="imgTabMap">
<area shape="rect" alt="" title="" coords="7,11,166,60" id="area1">
<area shape="rect" alt="" title="" coords="206,10,365,59" id="area2">
<area shape="rect" alt="" title="" coords="405,11,566,59" id="area3">
<area shape="rect" alt="" title="" coords="605,10,763,60" id="area4">
<area shape="rect" alt="" title="" coords="805,9,963,60" id="area5">
<!-- Created by Online Image Map Editor (http://www.maschek.hu/imagemap/index) -->
</map>
</td>
</tr>
<tr>
<td width="100%">
<iframe name="fraContent" id="innerframe" frameborder="0" scrolling="no" width="1000px"></iframe>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
现在我的页面需要一段时间才能加载，我无法弄清楚为什么点击在选项卡上似乎慢慢加载iframe。加载iframe的src会导致图像再次被预加载吗？加载相关图像是否更好，而不是在页面打开时将它们全部加载？
The thing is now my page takes a while to load, and I can't figure out why clicking on a tab seems to load the iframe slowly. Does loading the src of the iframe cause the images to be preloaded again? Would it be better to load the relevant images onclick instead of having them all load when the page opens?
我还发现了lieldulev并行加载脚本形式的一个很好的替代方案( imagesQueue）但我不知道知道如何使用它。
I also found a good alternative in the form of lieldulev's parallel loading script (imagesQueue) but I don't know how to use it.
顺便说一下，我并不精通JavaScript，所以我在努力学习。现在，我正在做的是实现我研究并试图理解它们的功能的技术，因此我的编码不像我希望的那样干净，有时甚至只是使用效率低下的蛮力代码以获得所需的效果。不过，我想改进一下，任何帮助都会受到赞赏。
BTW, I am not well-versed in JavaScript, so I'm trying to learn as I work. Right now, what I'm doing is implementing techniques that I research and trying to understand their functions, hence the reason why my coding isn't as clean as I'd like it to be, sometimes even just using inefficient "brute force" codes to get the desired effect. I'd like to improve on that, though, and any help would be appreciated.
关于并行缓存脚本，这是我在Nick的演示之后设置的测试页面：
Regarding the parallel cache script, here's a test page I set up patterned after Nick's demo:
<html>
<head>
<title>liel's smij dev page</title>
<style type="text/css">
#m1{
width:400px;
height:300px;
background-color:#adf;
}
canvas{
width:100%;
height:100%;
}
#show_me{float:left;width:100px;}
#console_log{font-size:10px;float:right;}
</style>
<script type="text/javascript" src="/systems_hr/Style%20Library/JavaScripts/imagesQueue.js"></script>
</head>
<body>
<h1>imagesQ(ueue.js) Demo</h1>
<!-- <img id="show_me" src="images/id1.png"> -->
<img id="show_me" alt="">
<div id="console_log">Log:</div>
<script type="text/javascript">
/*
imagesQueue Usage Example:
*/
// the img element to show
show_img = document.getElementById('show_me');
log_e = document.getElementById('console_log');
log = function(output){log_e.innerHTML +='<br/>'+(output)};
imagesQueue = imagesQ;
// On every image loaded show progress:
imagesQueue.onLoaded = function()
{
show_img.src = imagesQueue.current.src;
var output = 'Q1 '+(imagesQueue.images.length)+"/"+(imagesQueue.qLength)+" ("+imagesQueue.current.src+") Loaded (onLoaded)";
log(output);
}
// When done say so.
imagesQueue.onComplete = function()
{
QueuesCompleteAll();
}
log('Q1 Queued 10 images (queue_images)');
var now =(new Date).getTime(); // make sure to get non-cached images
imagesQueue.queue_images(['images/id1.png'+now,
'images/id1-1.png'+now,
'images/id1-2.png'+now,
'images/id1-3.png'+now,
'images/id2.png'+now,
'images/id2-1.png'+now,
'images/id2-2.png'+now,
'images/id2-3.png'+now,
'images/id3.png'+now,
'images/id3-1.png'+now]);
log('Starting the queue (process_queue)');
var start = (new Date).getTime();
imagesQueue.process_queue();
log('This is the next line in the code after process_queue, to avoid this, you should design create a function for the rest of your code and call it upon onComplete.');
function QueuesCompleteAll(){
var diff = (new Date).getTime() - start;
log('All Done ('+diff+'ms)');
}
</script>
</body>
</html>
目前，我无法让它工作:(我上传了imagesQueue脚本并链接它到页面并将原始演示页面中的图像值替换为我的开发站点中的内容。
At the moment, I couldn't get it to work :( I uploaded the imagesQueue script and linked it to the page and replaced the image values from the original demo page to what's in my development site.
推荐答案
在此页面上不幸没有像jquery演示那样的解释。但是有一个很容易监督的链接，所以我在这里发帖给你： imageQ-Demo 。
如果您阅读源代码，则imageQ的源代码将嵌套在< head>< / head>中的scripttag中; 部分。我建议您将此源代码移动到一个额外的文件中。
自定义代码嵌套在< body>< / body> section。
你要找的是
unfortunatly on this page there is no explaination, like jquery demos. But there is a link which is easy to oversee, so I post it for you here: imageQ-Demo.
If you read the source code, the source of imageQ it self is nested within scripttag in the <head></head> section. I recommend that you move this source code into an extra file.
The customised code ist nested within the <body></body> section.
What you look for is
<script type="text/javascript">
//Make an instance of imageQ
imagesQueue = imagesQ;
//Define the url of all your images
imagesQueue.queue_images (['', '', ...]);
//Start the preloading
imagesQueue.process_queue();
</script>
希望它能帮到你。
顺便说一句，谢谢你的链接。 ;-)
Btw, thank you for this link. ;-)
这篇关于预加载图像的最佳方式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
