Anyone wanna help me tackle this problem? I have basic programming knowledge (vb, actionscript, html), and I'm fuddling my way through javascript in writing my new website. So, the problem I have is with the .onLoad handler. I know that it is generally used i the <body> tag, or on images/documents in the <head> tag. I want to have an array of images load, then have the function fire, as in: imagesLoaded = new Array[] imagesLoaded[1] = image1.jpg; imagesLoaded[2] = image2.jpg; imagesLoaded[3] = image3.jpg; imagesLoaded.onLoad = someFunction(); So, it works. However, it works too fast, and doesn't recognize that the images aren't loaded yet. It seems to fire as soon as it knows the array exists, but not when the contents of the array are loaded. Any gurus wanna help out? Thanks
imagesLoad.onLoad = someFunction; You are calling someFunction() right away and assigning what it reutrns to the onLoad handler. imagesLoaded.onLoad = function() { ... } works, too
Hmm. I'm afraid I don't quite follow, Denny. Does that mean I should put the images I want to be preloaded into the function that the .onload calls?
if you say: x = foo(); you are calling the subroutine foo() and putting what it returns in x. imagesLoaded.onLoad = someFunction(); You are calling someFunction() and storing it in a variable called imagesLoaded.onLoad. What you want to do is store a reference to the function someFunction in that variable. Hence: imagesLoaded.onLoad = someFunction; However, I don't think the code you posted does what you really want. Something like: Code: var myImages = [ 'image1.jpg', 'image2.jpg', 'image3.jpg' ]; var imagesToLoad = myImages.length; for (var i=0; i<imagesToLoad; i++) { var img = new Image(10,10); img.onLoad = function() { imagesToLoad--; if (imagesToLoad == 0) { allDone(); } }; img.src = myImages[i]; } function allDone() { alert('all the images are loaded'); // now do what you want when the images are sure to be loaded }
There is no guarantee what order the images will actually finish loading. Consider the first image is 10 megabytes and takes 3 minutes to download while the second image is 10K and takes 1 second. This line: Code: img.onLoad = function() { is storing a reference to a function in the img.onLoad variable. It's a special "event" variable; when the load is complete and if you have stored a function reference in this variable, the function will be called.
If the size of the array is known in advance, why not explicitly populate the array upon array creation? Using your example: imagesLoaded = new Array(image1.jpg, image2.jpg, image3.jpg); In such a case, the array is simultaneously created and populated and hence, your function would not kick off until prior to the array being populated. Just a thought. Gramps...
Hey, thanks for the help. This is a little beyond me, but I think I can get it with a little googling. I'm going to stare at it until I understand. There are worse ways to spend Christmas. Thanks a lot!
The Image class/object provides event handlers for onLoad. If you set Image.src = 'some_url' it will cause the browser to request the image. It's not entirely clear what you are trying to accomplish from your first post, though. Typically, this kind of thing is done for rollovers so the images are loaded ASAP and the user won't have to wait for the image to be fetched when he mouses over the thing you want to have highlighted with another image. The way I structured my code example, you can add as many image urls in the myImages array, and the rest of the code will load them all. I am a huge fan of Javascript, and I write in it all day for a living.
right, my initial post was pretty vague. What I am trying to do is to have a set of links on one page. Each link has an onClick="function()" in it that will throw up a "loading" image while it preloads 5-10 large images. Once the last large image is done loading, the loading image will disappear and the large images will appear. I would just preload them all to start with, but there's more than 100 in all, so I'd rather have 5-10 load at a time. Given my inexperience with javascript and proper coding in general, I've been messing around with really inefficient workarounds for about 5 days now. At this point, I've got it so clicking the link with load the loading image, which will then load the first image, which will load the second, etc, until it gets to the last image, which will make them all visible. Obviously, it's not working properly. I'm going to try getting some ideas off of what you gave me.
I think you should look at jQuery http://jquery.com And then check out this demo: http://leandrovieira.com/projects/jquery/lightbox/
wow, this lightbox thing could solve all my problems. even though i DO like solving programming problems through days of guessing and google searching, i might just give this a shot. thanks a lot!
Well, I highly recommend you find a JS toolkit and write for it. jQuery is a pretty good one, but very low level. Something like http://extjs.com is very sophisticated for creating user interfaces. The idea here is that you let the guys at jQuery or ExtJS figure out all the different browser quirks and build them into their framework, then you write to their framework and your code just works.
Yeah, if I knew more about js, I think I would do that. At this point, my little hipster art site needs a way to display photos quickly, so if I can get lightbox up and running, it'll have to do for now. Someday when I have more time, I will learn how to program proper
