Load Images faster

[StrangerInBeijing]

I thought this will work well, but obviously not.
Look at http://www.accuracyauto.com/pdb.aspx (still developing as you can see, so sorry it look like dong)
Click on Search, then Search By Part
Now, I call this javascript that preload images (see the progress bar? javascript loading the images). On Image for each Part Type. This must change on the mouse over on the car image map.
But, even though the Images are "preloaded", it take long before an image shows up on the first time it's needed. After that, very fast.

Is there some other way, I cna make sure the images are allready cached on the client before enabling or showing the page?

The Search by location is worse...one image for each china province!!!

While you there...what you think of the basic stuff up so far? Critic welcome.

[mendhak]

I'm too lazy to look for it, so how are you preloading your images?

[StrangerInBeijing]

can you make sense out of this? (attached script)
i got this scripts somewhere (lost my history with a reinstall), and modified only the array of images that is being build.

[StrangerInBeijing]

huh? cant see the attachment...here's the code rather

var imagenames=new Array();
imagenames[0]	= "../images/pdb/parts/carmapj.png";
imagenames[1]	= "../images/pdb/parts/BodyAccessoriesj.png";
imagenames[2]	= "../images/pdb/parts/BrakeSystemj.png";
imagenames[3]	= "../images/pdb/parts/clutchj.png";
imagenames[4]	= "../images/pdb/parts/DriveSystemj.png";
imagenames[5]	= "../images/pdb/parts/Electricsj.png";
imagenames[6]	= "../images/pdb/parts/Enginej.png";
imagenames[7]	= "../images/pdb/parts/SteeringSystemj.png";
imagenames[8]	= "../images/pdb/parts/SuspensionSystemj.png";
imagenames[9]	= "../images/pdb/parts/Transmissionj.png";

var yposition=250;						//POSITION OF LOAD BAR FROM TOP OF WINDOW, IN PIXELS
var loadedcolor='gray' ;                // PROGRESS BAR COLOR
var unloadedcolor='white';				// BGCOLOR OF UNLOADED AREA
var barheight=20;						// HEIGHT OF PROGRESS BAR IN PIXELS (MIN 20)
var barwidth=350;						// WIDTH OF THE BAR IN PIXELS  
var bordercolor='black';				// COLOR OF THE BORDER

//DO NOT EDIT BEYOND THIS POINT		
var NS4 = (navigator.appName.indexOf("Netscape")>=0 && parseFloat(navigator.appVersion) >= 4 && parseFloat(navigator.appVersion) < 5)? true : false;
var IE4 = (document.all)? true : false;
var NS6 = (parseFloat(navigator.appVersion) >= 5 && navigator.appName.indexOf("Netscape")>=0 )? true: false;
var imagesdone=false;
var blocksize=barwidth/(imagenames.length-1);
barheight=Math.max(barheight,20);
var loaded=0, perouter, perdone, images=new Array();
var txt=(NS4)?'<layer name="perouter" bgcolor="'+bordercolor+'" visibility="hide">' : '<div id="perouter" style="position:absolute; visibility:hidden; background-color:'+bordercolor+'">';
txt+='<table cellpadding="0" cellspacing="1" border="0"><tr><td width="'+barwidth+'" height="'+barheight+'" valign="center">';
if(NS4)txt+='<ilayer width="100%" height="100%"><layer width="100%" height="100%" bgcolor="'+unloadedcolor+'" top="0" left="0">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+unloadedcolor+'"><center><font color="'+loadedcolor+'" size="1" face="sans-serif">Loading Image.  Please Wait...</font></center></td></tr></table>';
if(NS4) txt+='</layer>';
txt+=(NS4)? '<layer name="perdone" width="100%" height="'+barheight+'" bgcolor="'+loadedcolor+'" top="0" left="0">' : '<div id="perdone" style="position:absolute; top:1px; left:1px; width:'+barwidth+'px; height:'+barheight+'px; background-color:'+loadedcolor+'; z-index:100">';
txt+='<table cellpadding="0" cellspacing="0" border="0"><tr><td valign="center" width="'+barwidth+'" height="'+barheight+'" bgcolor="'+loadedcolor+'"><center><font color="'+unloadedcolor+'" size="1" face="sans-serif">Loading Image.  Please Wait...</font></center></td></tr></table>';
txt+=(NS4)? '</layer></ilayer>' : '</div>';
txt+='</td></tr></table>';
txt+=(NS4)?'</layer>' : '</div>';
document.write(txt);

function loadimages(){
if(NS4){
perouter=document.perouter;
perdone=document.perouter.document.layers[0].document.perdone;
}
if(NS6){
perouter=document.getElementById('perouter');
perdone=document.getElementById('perdone');
}
if(IE4){
perouter=document.all.perouter;
perdone=document.all.perdone;
}
cliplayer(perdone,0,0,barheight,0);
window.onresize=setouterpos;
setouterpos();
for(n=0;n<imagenames.length;n++){
images[n]=new Image();
images[n].src=imagenames[n];
setTimeout('checkload('+n+')' ,n*100);
}}
function setouterpos(){
var ww=(IE4)? document.body.clientWidth : window.innerWidth;
var x=(ww-barwidth)/2;
if(NS4){
perouter.moveTo(x,yposition);
perouter.visibility="show";
}
if(IE4||NS6){
perouter.style.left=x+'px';
perouter.style.top=yposition+'px';
perouter.style.visibility="visible";
}}
function dispbars(){
loaded++;
cliplayer(perdone, 0, blocksize*loaded, barheight, 0);
if(loaded>=imagenames.length)setTimeout('hideperouter()', 800);
}
function checkload(index){
(images[index].complete)? dispbars() : setTimeout('checkload('+index+')', 100);
}
function hideperouter(){
(NS4)? perouter.visibility="hide" : perouter.style.visibility="hidden";
imagesdone=true;
}
function cliplayer(layer, ct, cr, cb, cl){
if(NS4){
layer.clip.left=cl;
layer.clip.top=ct;
layer.clip.right=cr;
layer.clip.bottom=cb;
}
if(IE4||NS6)layer.style.clip='rect('+ct+' '+cr+' '+cb+' '+cl+')';
}
window.onload=loadimages;

[mendhak]

can you make sense out of this? (attached script)
i got this scripts somewhere (lost my history with a reinstall), and modified only the array of images that is being build.

Yes I can. You forgot to attach it.

[mendhak]

*rolls up sleeves*

[StrangerInBeijing]

ok honey.you are now officially my friday night date.

[mendhak]

Surely it could be simpler than that. What is this bit for:

setTimeout('checkload('+n+')' ,n*100);

Also, you're calling the images to be preloaded after the window loads which isn't necessarily the earliest possible moment. Just have, without function boundaries, the images being loaded.

var imagenames=new Array();
imagenames[0]	= "../images/pdb/parts/carmapj.png";
imagenames[1]	= "../images/pdb/parts/BodyAccessoriesj.png";
imagenames[2]	= "../images/pdb/parts/BrakeSystemj.png";
imagenames[3]	= "../images/pdb/parts/clutchj.png";
imagenames[4]	= "../images/pdb/parts/DriveSystemj.png";
imagenames[5]	= "../images/pdb/parts/Electricsj.png";
imagenames[6]	= "../images/pdb/parts/Enginej.png";
imagenames[7]	= "../images/pdb/parts/SteeringSystemj.png";
imagenames[8]	= "../images/pdb/parts/SuspensionSystemj.png";
imagenames[9]	= "../images/pdb/parts/Transmissionj.png";

var images = new Array();
images[0] = new Image(got,size); //?
images[0].src = imagenames[0]

And then in the mouseover, you can set the div's image's src to the image.

onMouseOver="javascript:document.getElementById('dynimg').src=imagenames[0];"

[StrangerInBeijing]

What is this bit for:
setTimeout('checkload('+n+')' ,n*100);

* no idea

Also, you're calling the images to be preloaded after the window loads which isn't necessarily the earliest possible moment. Just have, without function boundaries, the images being loaded.

* you mean just the following code in the head section?

var imagenames=new Array();
imagenames[0] = "../images/pdb/parts/carmapj.png";
imagenames[1] = "../images/pdb/parts/BodyAccessoriesj.png";
imagenames[2] = "../images/pdb/parts/BrakeSystemj.png";
imagenames[3] = "../images/pdb/parts/clutchj.png";

I dont really understand this bit....mind?
[QUOTE=mendhak]
var images = new Array();
images[0] = new Image(got,size); //?
images[0].src = imagenames[0]
[/CODE]

the rest make sense..thanks mate

[mendhak]

Yes. Just that array declaration and image assignment in the head section. That way, when it is encountered, it is processed rather than waiting for window.onload.

The code that I showed you there, it declares an array of images (since you're probably going to be generating this bit from the codebehind?), and each element becomes an Image() object in javascript. You could even just have

var image_1 = new Image(50,500);
image_1.src = "http://www.google.com/logo.gif";

I was just putting it into arrays.

[mendhak]

^^That is the proper way to preload images. Your code does do that, yes, but it's all complex and is being done in the window.onload method.

[StrangerInBeijing]

The code that I showed you there, it declares an array of images (since you're probably going to be generating this bit from the codebehind?), and each element becomes an Image() object in javascript. You could even just have

var image_1 = new Image(50,500);
image_1.src = "http://www.google.com/logo.gif";

.

I was thinking stick to javascript, as I dont know how to do things in the code behind that will occure before the page load? Kinda lost ..if one wnat to do that, you would call it in the initialize event?
Nvermind, I will stick to javascript. I got to trust it more than c# code behind by now and assume it's jsut a matter of time before i nearly do everything using javascripts. asp.net is slow, or i need to grab a book

[mendhak]

Either way, go with that code and don't use window.onload. Nevermind what I said about the codebehind then.

So essentially I'm asking you to do the same thing as you were doing before, only slightly different.

[StrangerInBeijing]

Thanks Mendhak

Your advice lead me to this article which was also of great help.

Thanks again.

[mendhak]

Yeah that looks about right. Good luck.

[StrangerInBeijing]

works like a bomb.

wonder if there is a way to pre-load flash animations? Guess not.

Got 2 on my main site. Noticed that after I clear my Internet History and delete offline files, the site load pretty slow...figured its because of the swf's.

[mendhak]

Yeah it is. That's where flash optimization comes in. Your flash developers could probably have a 'start' screen displaying in flash while the rest of the information loads. I hope it's not a flash SITE though, I can begin to tell you how annoying those are.


Load site.
Wait for flash to load.
Click a menu item.
Wait for that section to load...
Click another item.
Wait...
Close browser window, never return to site.

[StrangerInBeijing]

Hmmm...Cant get anything into the flash developer's head. She's new, can speak da inglish vely delicious, and dont shave.

Was thinking this.
Create a image which is basically just a screenshot of the flash animation (one for each) when it start.
Preload this image into the space that will display the flash.
Load the flash animations after the whole page have been loaded (uuuun....last thing in code behind in the page load event? Because I call a function to select what flash to use depending on the user's language, and some other stuff like date, etc).

worth an hour of my time?

[mendhak]

If you do that, it'll still take the same amount of time. Because the SWF runs in its own process space on the client's machine. So it'll take its own sweet time while your window still waits for it.

[StrangerInBeijing]

thanks M...I dont give a flying $h!t about that now. geez....you wont believe what some people think they can get away with.

[mendhak]

Isn't there a chance of recovery? Weren't you about to use some source control software?

[StrangerInBeijing]

All recovered now.

Used VSS before, but the thing gave me such a pain with dll's, I implemented my own solution.
Because his code was dependant on this dll, i never realized some code are missing because the dll was there.