OnLoad images error. Please help. [Archive]

Click to See Complete Forum and Search --> : OnLoad images error. Please help.

Colin

12-31-2002, 12:39 PM

Hello,

I'm having some preload problem on my site. The graphics just simply dont preload and whenever I hovers my mouse over it will download the image again.

My website URL is http://newsite.mircstats.net/

Codings extract from my html file.

<SCRIPT LANGUAGE="JavaScript">

</script>

<body bgcolor="#336699" ONLOAD="PreloadImages()">

<a href="#" onMouseOver="changeImages('mycomp', '/images/mycomputer_roll.gif'); return true; document.all.menu.innerHTML='Mircstats.net Location: Atlanta Capacity: 1.5 GB Owner: Colin';"

onMouseOut="changeImages('mycomp', '/images/mycomputer.gif'); return true; document.all.menu.innerHTML = ' Welcome to Hobbits IRC Services. Please take your time to surf here. Oh yah do post your comments about this site at Studio Shout.Lastly wishing everyone a Happy New Year.';"><img src="images/mycomputer.gif" border="0" NAME="mycomp" alt="Mircstats.NET">

spoontacular

12-31-2002, 12:55 PM

You have a few errors in your syntax:

var img0 = new Image();
img0.src = "/images/mycomputer_roll.gif";

Try that. :)

Colin

12-31-2002, 01:19 PM

spoontacular,

It didnt work. The delay is still there.

Below is my modified codings.

function PreloadImages()
{
if (document.images)
{
// preload all images
var img0 = new Image();
img0.src = newImage("/images/mycomputer_roll.gif");
var img1 = new Image();
img1.src = newImage("/images/forumboard_roll.gif");
var img2 = new Image();
img2.src = newImage("/images/gotquestion_roll.gif");
var img3 = new Image();
img3.src = newImage("/images/emailcolin_roll.gif");
var img4 = new Image();
img4.src = newImage("/images/rvhs_roll.gif");
var img5 = new Image();
img5.src = newImage("/images/diablo2_roll.gif");
var img6 = new Image();
img6.src = newImage("/images/warcraft3_roll.gif");
var img7 = new Image();
img7.src = newImage("/images/ajc_roll.gif");
var img8 = new Image();
img8.src = newImage("/images/cjc_roll.gif");
var img9 = new Image();
img9.src = newImage("/images/pjc_roll.gif");
var img10 = new Image();
img10.src = newImage("/images/987fm_roll.gif");
var img11 = new Image();
img11.src = newImage("/images/steadless_roll.gif");
PreloadFlag = true;
}
}

khalidali63

12-31-2002, 01:25 PM

var img0 = new Image();
img0.src = newImage("/images/mycomputer_roll.gif");

This is incorrect

it should be

var img0 = new Image();
img0.src ="/images/mycomputer_roll.gif";

spoontacular

12-31-2002, 01:26 PM

Exactly what I had. :mad:

Colin

12-31-2002, 01:38 PM

opps

I must be blind :confused:

This time round I modified the codings and again it seems not to be working. Grrr....

function PreloadImages()
{
if (document.images)
{
// preload all images
var img0 = new Image();
img0.src = "/images/mycomputer_roll.gif";
var img1 = new Image();
img1.src = "/images/forumboard_roll.gif";
var img2 = new Image();
img2.src = "/images/gotquestion_roll.gif";
var img3 = new Image();
img3.src = "/images/emailcolin_roll.gif";
var img4 = new Image();
img4.src = "/images/rvhs_roll.gif";
var img5 = new Image();
img5.src = "/images/diablo2_roll.gif";
var img6 = new Image();
img6.src = "/images/warcraft3_roll.gif";
var img7 = new Image();
img7.src = "/images/ajc_roll.gif";
var img8 = new Image();
img8.src = "/images/cjc_roll.gif";
var img9 = new Image();
img9.src = "/images/pjc_roll.gif";
var img10 = new Image();
img10.src = "/images/987fm_roll.gif";
var img11 = new Image();
img11.src = "/images/steadless_roll.gif";
PreloadFlag = true;
}
}

spoontacular

12-31-2002, 01:49 PM

Do the images still flip?

Colin

12-31-2002, 01:55 PM

spoontacular,

Yes but there is delay when i place my mouse over.

Check it out at http://newsite.mircstats.net/ (http://newsite.mircstats.net)

khalidali63

12-31-2002, 01:59 PM

To me it looks like that there are some problems with image src files.
Please verify that all of the src files are accessible from this pages location.
My guess will be correct if there are partial images that are being preloaded rather then all of them

spoontacular

12-31-2002, 02:00 PM

That was my next question. :P

Colin

12-31-2002, 02:10 PM

I'm sorry but I'm kinda new to javascript.

How do I check that the src files are accessible?

What should I do next?

spoontacular

12-31-2002, 02:13 PM

Check to make sure the images exist and that "/images/filename" is the correct path, etc.

khalidali63

12-31-2002, 02:13 PM

well a crude way to find that will be typing the path in your browsers address bar and see if the image loads,once all of them are validated u r good to go.
A much better and correct way will be to make use of

img.onload and img.onerror events of the img object,but that may be a bit of work

Khalid

spoontacular

12-31-2002, 02:19 PM

Aye, my Mozilla JavaScript console picked up this error twice:

document.all has no properties.

I believe that the problem is in your changeImages function here:

document[changeImages.arguments[i]].src = changeImages.arguments[i+1];

document.images[(changeImages.arguments[i])].src maybe?

Colin

12-31-2002, 02:20 PM

Yes, those images are working fine with "images/*.gif"

spoontacular

12-31-2002, 02:23 PM

Fixed:

function changeImages() {
if (document.images && (PreloadFlag == true)) {
for (var i = 0; i < changeImages.arguments.length; i += 2) {
document.images[(changeImages.arguments[i])].src = changeImages.arguments[(i + 1)];
}
}
}

Colin

12-31-2002, 02:45 PM

spoontacular,

I modified the codings according to yours and I even add in those mouseout images to the src files but it still not working without any delay. :confused:

Below are the modified codings.

<SCRIPT LANGUAGE="JavaScript">

</script>

spoontacular

12-31-2002, 06:16 PM

The problem is not in the function: it is in your HTML.

Example:
onMouseOut="changeImages('mycomp', '/images/mycomputer.gif'); return true; document.all.menu.innerHTML = ' Welcome to Hobbits IRC Services. Please take your time to surf here. Oh yah do post your comments about this site at Studio Shout.Lastly wishing everyone a Happy New Year.';"

"document.all" is a IE-only thing.
document.getElementById('id').innerHTML would be better.

Colin

01-01-2003, 01:17 AM

spoontacular,

Modifying that line doesnt help in fixing in the delay for the onmouseover right?

<a href="#" onMouseOver="document.getElementById('menu').innerHTML='Mircstats.net Location: Atlanta Capacity: 1.5 GB Owner: Colin'; changeImages('mycomp', 'images/mycomputer_roll.gif'); return true;"

onMouseOut="document.getElementById('menu').innerHTML = ' Welcome to Hobbits IRC Services. Please take your time to surf here. Oh yah do post your comments about this site at Studio Shout.Lastly wishing everyone a Happy New Year.'; changeImages('mycomp', 'images/mycomputer.gif'); return true;"><img src="images/mycomputer.gif" border="0" NAME="mycomp" alt="Mircstats.NET">

So how do I go about fixing the delay?

spoontacular

01-01-2003, 01:32 AM

The delay may be your modem, not the website. If the images are medium sized and you're "preloading" eleven of them, it may take a while on a dialup connection.

It's definately not the code.

Colin

01-01-2003, 03:11 AM

spoontacular.

Isnt it the way like when you had preloaded them and when you hover your mouse over the image, the imageover will be loaded directly from your computer instead of redownloading the image again?

Anyway my connection is broadband.