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>
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?
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.
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.
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>
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.
reporter
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>
hopefully it will helps you.
Btw, thank you for this link. ;-)
Your idea is good, when you want to have a fluent image change on-click. Altough script is coded in pure javascript (you can use more convinient approach: http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript) it shouldn't have such big influence on performance. Maybe the reason lays somewhere else. Maybe your images are too heavy...
Another solution besides javascript is using pure CSS approach and i suppose it would be much faster. Try to place all the images on single PNG and in CSS try to manipulate background-position value of the individual tabs. For example:
.tab {
background-image:url('single.png');
}
#tab5 {
background-position: 10px 20px;
}
#tab5:hover {
background-position:10px 25px;
}
This way all images would be loaded once at one time.
来源：https://stackoverflow.com/questions/6150070/best-way-to-preload-images