Jump to content

Image preloader problem

son

By son
in JavaScript

Recommended Posts

son Dedicated Member

son

Posted
Posted

On of my pages it is possible to hover over thumbnails to change the main displayed image. Also, there is a button and once pressed a pop up with even larger image comes up. It is all working fine, but takes a bit long. I wondered what I am doing wrong with my preloader, which is called via '<body onLoad="java script:preloader()">'? The main images are stored in folder 'main' and the enlarged ones in folder called 'enlarged'. They always have same name as thumbs.

<script language="JavaScript">function preloader() {     // counter     	 var i = 0;     // create object	 imageObj = new Image();     // set image list	 images = new Array();     	 images[0]="main/1-268.jpg"     	 images[1]="main/2-268.jpg"     	 images[2]="main/3-268.jpg"     	 images[3]="enlarged/1-268.jpg"	 images[4]="enlarged/2-268.jpg"	 images[5]="enlarged/3-268.jpg"     // start preloading     	 for(i=0; i<=5; i++)      {          	 imageObj.src=images[i];     	 }} </script><script type="text/javascript">if (document.images) {image0_src = '1-268.jpg';image1_src = '2-268.jpg';image2_src = '3-268.jpg';} else {image0 = '';image1 = '';image2 = '';document.rollimg = '';} var pic = "1-268.jpg";function change_image(val){document.rollimg.src = 'main/' + val;  pic = val;}function goWin() {var windowprops ="width=690px,height=740px,top=50px,left=50px,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no";TheWin = window.open('','image',windowprops);TheWin.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">');TheWin.document.write('<head><title>Enlarged Photo<\/title><\/head><body style="overflow:hidden;margin:20px;background-color:#FFF;">');TheWin.document.write('<p><img src="enlarged/' + pic + '" width="650" height="650" alt="Enlarged product photo" title="Enlarged product photo"><\/p>');TheWin.document.write('<div align="center"><a href=\"java script:void(0)\" onclick=\"window.close()\" style="color:#cacb7f;">Close Window</a><\/div><\/body><\/html>');TheWin.document.close();TheWin.focus();}</SCRIPT>

Thanks,Son

Link to comment
Share on other sites
boen_robot w3schools Guru

boen_robot

Posted
Posted

You need to have different image objects, each storing the different source picture. What you have instead is a single image object, which changes its source. This makes the browser discard the first picture before fetching the second.Try creating an array of image objects, and then looping over that array, placing each image as appropriate. Something like:

	// set image list	images = new Array();	images[0]="main/1-268.jpg";	images[1]="main/2-268.jpg";	images[2]="main/3-268.jpg";	images[3]="enlarged/1-268.jpg";	images[4]="enlarged/2-268.jpg";	images[5]="enlarged/3-268.jpg";	//Create a holder for the loaded images	imageObjects = new Array();	for(var i=0,l=images.length; i<=l; i++)	  {		//Load the image		var imageObj = new Image();		imageObj.src=images[i];		//Place the loaded image in the holder		imageObjects[i] = imageObj;	}

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Also, don't use the java script: pseudo-protocol in the onload attribute.

Link to comment
Share on other sites
son Dedicated Member

son

Posted
  • Author
Posted
Also, don't use the java script: pseudo-protocol in the onload attribute.
So, I use now
function preloader() {     // set image list	 images = new Array();     	 images[0]="main/1-322.jpg"     	 images[1]="main/2-322.jpg"     	 images[2]="main/3-322.jpg"     	 images[3]="enlarged/1-322.jpg"	 images[4]="enlarged/2-322.jpg"	 images[5]="enlarged/3-322.jpg"    //Create a holder for the loaded images    imageObjects = new Array();    for(var i=0,l=images.length; i<=l; i++)      {        //Load the image        var imageObj = new Image();        imageObj.src=images[i];        //Place the loaded image in the holder        imageObjects[i] = imageObj;    }

without any of the other bits I used before. It seems to be quicker, but sometimes it still takes a while to load... What did you mean by 'not to use pseudo-protocol'? I thought this was necessary so the function is called?Son

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted
It seems to be quicker, but sometimes it still takes a while to load
Well, even if it preloads, if the images are big they will still take a while to download.
What did you mean by 'not to use pseudo-protocol'? I thought this was necessary so the function is called?
That's only when putting it in the href attribute of links, e.g.
<a href="javascript:preloader();">Link</a>

When using event handlers a script is expected as the property and so the pseudo-protocol is not required (and won't work).

Link to comment
Share on other sites
son Dedicated Member

son

Posted
  • Author
Posted
Well, even if it preloads, if the images are big they will still take a while to download.
Thanks for clarification. With regard to the above. But the page has finished downloading and the download starts for relevant picuture once I hovered over it. Is this also normal?Son
Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted
But the page has finished downloading and the download starts for relevant picuture once I hovered over it. Is this also normal?
Not if the preloader is working. Did you remove the javascript bit in the onload attribute?By the way, the second "parameter" of for() should be i<l;
Link to comment
Share on other sites
son Dedicated Member

son

Posted
  • Author
Posted
Not if the preloader is working. Did you remove the javascript bit in the onload attribute?By the way, the second "parameter" of for() should be i<l;
Changed the i bit (also have no onload attribute any more). Still for some product photos takes a while when clicked upon, although the page has finished loading. Is there anything else I am missing? The complete code is:
<script language="JavaScript">function preloader() {     // set image list	 images = new Array();     	 images[0]="main/1-268.jpg"     	 images[1]="main/2-268.jpg"     	 images[2]="main/3-268.jpg"     	 images[3]="enlarged/1-268.jpg"	 images[4]="enlarged/2-268.jpg"	 images[5]="enlarged/3-268.jpg"    //Create a holder for the loaded images    imageObjects = new Array();    for(var i=0,i=images.length; i<=l; i++)      {        //Load the image        var imageObj = new Image();        imageObj.src=images[i];        //Place the loaded image in the holder        imageObjects[i] = imageObj;    }}    </script><script type="text/javascript">if (document.images) {image0_src = '1-268.jpg';image1_src = '2-268.jpg';image2_src = '3-268.jpg';} else {image0 = '';image1 = '';image2 = '';document.rollimg = '';} var pic = "1-268.jpg";function change_image(val){document.rollimg.src = 'main/' + val;  pic = val;}function goWin() {var windowprops ="width=690px,height=740px,top=50px,left=50px,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no";TheWin = window.open('','image',windowprops);TheWin.document.write('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">');TheWin.document.write('<head><title>Enlarged Photo<\/title><\/head><body style="overflow:hidden;margin:20px;background-color:#FFF;">');TheWin.document.write('<p><img src="enlarged/' + pic + '" width="650" height="650" alt="Enlarged product photo" title="Enlarged product photo"><\/p>');TheWin.document.write('<div align="center"><a href=\"java script:void(0)\" onclick=\"window.close()\" style="color:#cacb7f;">Close Window</a><\/div><\/body><\/html>');TheWin.document.close();TheWin.focus();}</SCRIPT> </head><body>

SonReason for edit: There was a closing bracket missing, but did not solve the preload problem...(

imageObjects[i] = imageObj;    }[b]}[/b]

)

Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted

Umm... do you have a link to your page? This is getting confusing...

Link to comment
Share on other sites
son Dedicated Member

son

Posted
  • Author
Posted 
<body>

What happened to the onload bit? :)

Thought I had to remove it (thought it was strange...). Have now "<body onload="preloader()">", but IE complains that there are errors on page (without giving me any more details this time).Son
Link to comment
Share on other sites
son Dedicated Member

son

Posted
  • Author
Posted
Thought I had to remove it (thought it was strange...). Have now "<body onload="preloader()">", but IE complains that there are errors on page (without giving me any more details this time).Son
Working now:-)Son
Link to comment
Share on other sites
Synook w3schools Guru

Synook

Posted
Posted
Thought I had to remove it (thought it was strange...).
Sorry if I gave you that impression in my first response :). I meant to just remove the java script: keyword.By the way if you don't want to use the onload attribute after you define preloader() you can write
window.onload = preloader;

Link to comment
Share on other sites
son Dedicated Member

son

Posted
  • Author
Posted
Sorry if I gave you that impression in my first response :). I meant to just remove the java script: keyword.By the way if you don't want to use the onload attribute after you define preloader() you can write
window.onload = preloader;

Use the window.onload now, cheers:-) With the removal of the onload from the body tag do not worry, it is just me not having a clue about proper JavaScript;-)Thanks a lot for your help,Son
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...