detecting if loaded with image variables

[kwhubby]

hi, how do you detect if an image variable is loaded,
such as this one
var x = New Image()
x.src = "balloon.gif"

I think its easy, i just don't know the correct syntax

[Mhtml]

I'm not quite sure what you mean, where do you need to check if it is loaded? Do you mean something like this...

if(x.src=='balloon.gif'){

}
?

[kwhubby]

I am trying to dectect when the image is completely cached, and no longer is loading, such as this,
<img src="balloon.gif" onload="function">
but with the image variable

[Borgtex]

x.onload=my_function

[kwhubby]

with out putting in quotes at x.onload= it runs the function yet with an error , saying not implimented, and it does it when that line is executed not when the image loads

with quotes it never runs the function not even when the image loaded.

i am using ie 6.0.

does anybody know how to do this??

[Borgtex]

:confused: quotes? what do you mean?

x.onload=new Function("alert('image loaded')")

or

function imgok()
{
alert('image loaded')
}

x.onload=imgok

[joh6nn]

<img src="balloon.gif" onload="function">

that's what he's talking about.

i've never done it that way, but logically, it should work that way. can we see the exact code you're working with?

[kwhubby]

sorry I have not been gone for a week.

quotes?? : I mean like this x.onload="something()"
or x.onload=something()

and I don't want to use the onload feature for <img> objects, unless I have too, bucause it really complicates it, because with animated gifs, It triggers each cycle of the image

The situation that I am using this in is with my game, wich is just to load all the images used with, and too much other stuff to want to post for this small reason.
If needed, I will post an example of just the loading.

ps. I am using x.onload inside a function, will that efect if it works

[Graeme Hackston]

Are you looking for something like this? It's not tested but the idea works because I use it for another purpose.


Timer_Check_Imgs_Load = setInterval("Check_Imgs_Load()", 10);


function Check_Imgs_Load() {
All_Images = document.images.length
temp = new Array(0)
for (var i=0;i<All_Images;i++) {
// This is where I'm not sure, I'm using document.getElementById('img-id' + variable).complete
if (document.images[i].complete) {
temp[temp.length] = i
}
}
if (temp.length == All_Images) {
clearInterval(Timer_Check_Imgs_Load);

// do whatever

}
}

[kwhubby]

wow, thanks!!! i did not know that image.complete existed, that wil really help thanks

[Graeme Hackston]

As an aside, if you've got lots of images, the function can be used to increment a progress bar with complete accuracy.

[kwhubby]

yeah, I used this with a progress bar, that was what I was trying to do, but I needed to know the .complete thing, because I was trying to do it a different way that didn' work. the idea with setInterval was also helpful.

thanks again :D

[ripvtech]

I'm not sure if this is dead or not but I stumbled across this topic from google.
I'm using the above code in a progress bar on my webpage the toggled action at the end it to HIDE the progress bar. It works great in IE, however in Firefox it will not HIDE the progress bar.

Thanks for any help.

[kwhubby]

Well this is an old thread but still useful. Show the actual page, that would help. You could try using the document.getElementById('img-id' + variable).complete Im not sure if thats moz compatible.

[ripvtech]

Thanks for you reply, One more question!?!
In using document.getElementById('img-id' + variable).complete
the 'img-id' part am I putting in a varriable that I assign at the top of the function or do I type in the actual id of the varriable also with the '+ variable' part is that suppose to read '+ i' using the above varriable?

Am I making sense? I almost lost myself on that one :eek:

Thank you

[kwhubby]

It's somewhat hard to understand what you are saying hehehe. The ('img-id' + variable) should work with 'img-id' being a prefix of the name of an image id and then variable to act as a number so you could have images like
<img id="blah1">
<img id="blah2">
<img id="blah3">
and then you would be using document.getElementById('blah' + variable).complete
I hope that helps