JavaScript is interrupting the loading of images

What you could try is to disable the links until all your images have downloaded.

In your preloading script you would need to add something like

loaded=false

if(i==a.length-1){
loaded=true
}

and then in your toggle script

function toggle(targetID) {

if(loaded==false){
return
}

if (document.getElementById) {

There are a few variations of preloading that you could try.

If you want to see some examples of preloading scripts see my Preloader MKII or Preloader MKIII at

www.huntingground.freeserve.co.uk/scripts/preload2.htm

Hi,

Thanks for the reply, and sorry I didn't get back to this sooner. Hope you're still watching the topic. ;)

Anyway, I tried your suggestions, but I'm not sure if I put the code in the right places. I'm posting my two scripts below, and would appreciate it if someone could tell me exactly where to insert the new code in each of them. I tried a couple of places, but the toggle script stopped working altogether and just gave me a little javascript error.

Toggle script:
function toggle(targetID) {
if (document.getElementById) {
target = document.getElementById(targetID);
if (target.style.display == "none") {
target.style.display = "";
} else {
target.style.display = "none";
}
}
}

Preload script:
function MM_preloadImages() { //v3.0
var d=document;
if(d.images){
if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments;
for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){
d.MM_p[j]=new Image;
d.MM_p[j++].src=a[i];
}
}
}

I had a look at your two preload scripts, but I think that's a little beyond me. I must confess that I didn't even know where to start working on them.

So if anyone can help me get this sorted out, it would be greatly appreciated.

Cheers,

Seona.

Try this preloading script it also contains your toggle function.



<script language="javascript">
<!--
// Realised by ApacheJeff
// www.huntingground.freeserve.co.uk

images=new Array("anenome100.jpg","checkogrn100.jpg","chicago4102100.jpg","elmas100.jpg","elmas2100.jpg","2005sml.jpg","2011sml.jpg","2013sml.jpg","2039sml.jpg","2205sml.jpg","flokati rug100.jpg","habitat100.jpg","melody bright100.jpg","sisal rug100.jpg","status rug100.jpg","studio1_33151sml.jpg","studio1_33140sml.jpg","austin shag100.jpg","best 02 red100.jpg","55059sml.jpg","55901sml.jpg","55001sml.jpg","Chiraz small medallions beige 8438-4 sml.jpg","evergreen 021_100.jpg","12001sml.jpg","12039sml.jpg","65067sml.jpg","65081sml.jpg","65156sml.jpg","RED-ROSE-BA100.jpg","trendrug100.jpg","4301sml.jpg","4302sml.jpg","5137sml.jpg","5147sml.jpg","5653sml.jpg","5752sml.jpg","8438sml.jpg","9007sml.jpg","9099sml.jpg","9379sml.jpg","9534sml.jpg","9696sml.jpg","kids numbers100.jpg","kids roadway100.jpg")


img_total=images.length
run_num=img_total

loaded=0
a_index=0
is_error=0

var preloaded=new Array()

function preload_image(){
preloaded[a_index]=new Image()
preloaded[a_index].onerror=no_image
preloaded[a_index].src=images[a_index]
if(is_error==0){chk_loading()}
}

function chk_loading(){
if(preloaded[a_index].complete==true){next_image()}
else{setTimeout("chk_loading()",100)}
}

function next_image(){
a_index++
if(a_index!=images.length){
setTimeout("preload_image()",100)
}
if(a_index==run_num){
loaded=1
}
}

function no_image(){
is_error=1
a_index++
setTimeout("is_error=0;preload_image()",100)
}


function toggle(targetID){

if(loaded==0){
return
}

if(document.getElementById){
target = document.getElementById(targetID);
if(target.style.display == "none") {
target.style.display = "";
}
else{
target.style.display = "none";
}
}
}


// add onload="preload_image()" to the opening body tag

//-->
</script>

Thanks for the code. I've put it in, but I get the following JS error in the browser when I try to load the page:

'preloaded[...].complete' is null or not an object.


Any suggestions as to why? I'm afraid I'm a JS novice, and can't really work out what's going wrong here.

Thanks,

Seona.

You've got SQL errors too.

I'll take a look at your page

Make a copy of your page then remove all other scripts except for the preloader.

Also remove the 2 flash objects.

Try the page.

Then put the other scripts and flash objects back in one at a time and try the page each time you put one back in.

When the error returns you will then know what is causing it.

Note:

In your page you have this script twice.

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_openBrWindow(theURL,winName,features) { //v2.0
window.open(theURL,winName,features);
}
//-->
</script>

You also have when the toggle function is in with the preloading script

<script src=http://www.codingforums.com/archive/index.php/"../_styles/toggle.js" type="text/javascript"></script>

You also have

onkeypress="MM_openBrWindow('index.cfm?fuseaction=main.Disclaimer&amp;popup=yes','','scrollbars=yes,resizable=yes,width=550,height=600'); return false;"

which I do not think belongs in a link

onkeypress is usually in a script because it is monitoring the window for that action

Instead of doing all that why dont you just change the links that do the collapse and expand.
<h2><a href=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"javascript:;" onclick="toggle(18)" onKeyPress="toggle(18)">Woollen Rugs</a></h2>

<h2><a href=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"javascript:;" onclick="toggle(18);return false;" onKeyPress="toggle(18)">Woollen Rugs</a></h2>

If you don't do the "return false" IE assumes that when you click on a link that a new page is about to be loaded so it stops processing the current page. All image loading stops and all animated gifs stop also.

<h2><a href=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"javascript:;" onclick="toggle(18);return false;" onKeyPress="toggle(18)">Woollen Rugs</a></h2>

Putting javascript: as the link source is the worse thing you could do.

For accessability reasons the page source should be put there along with the return false

And to my knowledge the onKeyPress will only work once that link has been clicked which is a bit daft when you think about it especially if the toggle parameter is different for each link.

It would also mean that once the link has been clicked the only thing your keyboard will do is call that function until the page is unloaded.

Putting javascript as the link source is the worse thing you could do.

I agree but the link is only being used as a kind of button to toggle the display of the hidden items. It may be better to either use a button for this job or use the link to point to a completely different, alternative page that displays the hidden items
<h2><a href=http://www.codingforums.com/archive/index.php/"other/woolen_rugs.html" onclick="toggle(18);return false;" onKeyPress="toggle(18)">Woollen Rugs</a></h2>
If javascript is disabled then the user will be taken to the link. (However, if javascript is disabled I think that script shows all the data expanded anyway?)


And to my knowledge the onKeyPress will only work once that link has been clicked

Not true. You can use the tab key (and back tab) to focus on the link and then use the keyboard to toggle the display of the hidden items.

Not true. You can use the tab key (and back tab) to focus on the link and then use the keyboard to toggle the display of the hidden items.


True but would the general public have the keyboard experience to know this, they might get confused as to what is happening when every time they hit a key this page keeps poppin up

Woohoo! The 'return false' did the trick. Thank you all for your help, and taking the time to examine the problem.

I know that using javascript:; as a link is usually not good, but the idea of the script is indeed that if the user doesn't have JS capabilities they see the whole thing in the first place. The toggle script is just to make it a little nicer for most users, since some of the sections will get pretty long when all of the products are finally entered.

Cheers, and thanks again. :)

Seona.