What is the best way to preload images? I am trying to create an image tab that has about 59 PNG images. Here is the code that I still have:
<!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>
My page now takes some time, and I cannot understand why clicking on a tab seems to load the iframe slowly. Does src iframe load uploaded images again? Would it be better to download the corresponding onclick images instead of having them all load when the page opens?
I also found a good alternative in the form of parallel loading lieldulev script (imagesQueue) , but I don't know how to use it.
By the way, I don't understand JavaScript, so I try to learn when I work. Now I am introducing techniques that I study and trying to understand their functions, so the reason my encoding is not as clean as I would like, sometimes even just using inefficient "brute force" to get the desired effect. I would like to improve this and any help would be appreciated.
Regarding the parallel script cache, here is the test page that I set from the template after the Nick demo:
<html> <head> <title>liel 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 could not get it to work :( I downloaded the imagesQueue script and linked it to the page and replaced the image values ββfrom the original demo page with what was on my development site.