预加载图像的最佳方式
Posted
技术标签:
【中文标题】预加载图像的最佳方式【英文标题】：Best way to preload images 【发布时间】：2011-09-03 06:02:45 【问题描述】：预加载图片的最佳方式是什么？我正在尝试创建一个包含大约 59 个 png 图像的图像选项卡。这是我到目前为止的代码：
<!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" >
<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" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="" style="border: 0px; width: 1000px; height: 72px;" usemap="#imgTabMap" name="imgTab" id="imgTab">
<map id="imgTabMap" name="imgTabMap">
<area shape="rect" title="" coords="7,11,166,60" id="area1">
<area shape="rect" title="" coords="206,10,365,59" id="area2">
<area shape="rect" title="" coords="405,11,566,59" id="area3">
<area shape="rect" title="" coords="605,10,763,60" id="area4">
<area shape="rect" 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 >
<iframe name="fraContent" id="innerframe" frameborder="0" scrolling="no" ></iframe>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>
现在我的页面需要一段时间才能加载，我不明白为什么单击选项卡似乎会缓慢加载 iframe。加载 iframe 的 src 会导致图像再次被预加载吗？在页面打开时加载相关图片而不是全部加载会更好吗？
我还找到了一个不错的替代方案，lieldulev 的并行加载脚本(imagesQueue)，但我不知道如何使用。
顺便说一句，我不精通 JavaScript，所以我在工作的同时努力学习。现在，我正在做的是实施我研究的技术并试图理解它们的功能，这就是为什么我的编码不像我希望的那样干净，有时甚至只是使用低效的“蛮力”代码以获得所需的效果。不过，我想对此进行改进，我们将不胜感激。
关于并行缓存脚本，这是我按照 Nick 的演示设置的测试页面：
<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_mefloat:left;width:100px;
#console_logfont-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" >
<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 脚本并将其链接到页面，并将原始演示页面中的图像值替换为我的开发站点中的内容。
【问题讨论】：
与您在页面中监督的演示相比，您的“'images/id1-1.png+now'”是错误的。现在变量应该是一个参数，并且不要扩展您的文件扩展名;-) 【参考方案1】：您的想法很好，当您希望点击时获得流畅的图像更改。 Altough 脚本是用纯 javascript 编码的（您可以使用更方便的方法：http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript）它不应该对性能产生如此大的影响。 也许原因在别的地方。可能你的图片太重了……
除了 javascript 之外的另一种解决方案是使用纯 CSS 方法，我想它会快得多。尝试将所有图像放在单个 PNG 上，并在 CSS 中尝试操纵各个选项卡的背景位置值。例如：
.tab
background-image:url('single.png');
#tab5
background-position: 10px 20px;
#tab5:hover
background-position:10px 25px;
这样一来所有图片都会一次加载一次。
【讨论】：
@paweł-forys - 谢谢你 :) 我看了看我的图片，它们大概是 15 - 23kb。单独来说，它们很小，但也许它们以某种方式集体地破坏了性能？我没有考虑到的另一件事是上周五我有很多事情要做。我今天检查了一下，没有上周五那么慢，因为我只打开了 Outlook、2 个 SP 设计器窗口和 3 个 IE 选项卡。不过，我会尝试该脚本，因为当前设置仍然存在性能问题。我先试试并行缓存。 ，但是您发送给我的 JQuery 代码现在将合并到我的全局 js 文件中，以便在另一个页面中使用 :) * 哈哈哈不得不将我的评论分成两部分，空间不足。 【参考方案2】：不幸的是，在这个页面上没有解释，比如 jquery 演示。但是有一个链接很容易监督，所以我在这里为您发布：imageQ-Demo。
如果您阅读源代码，那么 imageQ 的源代码本身就嵌套在 <head></head> 部分的 scripttag 中。我建议您将此源代码移动到一个额外的文件中。
自定义代码嵌套在 <body></body> 部分中。
你要找的是
<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>
希望对你有所帮助。
顺便说一句，感谢您提供此链接。 ;-)
【讨论】：
@nick-weaver - 没问题，并行缓存很有用 :) 谢谢你 :) 不过还是有一点问题 :( 这是我在你的演示页面之后制作的测试页面： *哎呀，不适合评论块:(我会把它放在原始条目中。 @poch 与您在页面中监督的演示相比，您的“'images/id1-1.png+now'”是错误的。现在变量应该是一个参数，并且不要扩展您的文件扩展名;-)以上是关于预加载图像的最佳方式的主要内容，如果未能解决你的问题，请参考以下文章
考虑 application.properties 的预加载数据的 Spring 数据最佳实践