www.webdeveloper.com
Results 1 to 9 of 9

Thread: Trigger on image loading?

  1. #1
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,706

    Trigger on image loading?

    Is there a way to trigger an event when an image has finished loading?

  2. #2
    Join Date
    Mar 2009
    Posts
    486
    Yes. A javascript Image object does support an onload function.

  3. #3
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,706
    Okay, what I want is something that says "When all images are loaded, do something."

    This is my code so far:

    PHP Code:
    var $checkimgs document.getElementsByTagName('img');
    var 
    $imgsloaded 0;
    for(
    $i 0$i $checkimgs.length$i++){
        
    $checkimgs[$i].onload = function($i){return function(){
            
    $imgsloaded++;
            if(
    $checkimgs.length == $imgsloaded){
                
    alert('All Loaded');
            }
            
    alert('Images Loaded: '+$imgsloaded);
        }}(
    $i);

    Unfortunately, I only get one alert box, which says "Images Loaded: 1", and no alert boxes after that. How do I set it up so I get "Images Loaded: 2", "Images Loaded: 3", etc. as well as the "All Loaded" alert box?

  4. #4
    Join Date
    Mar 2009
    Posts
    486
    I have no way of knowing from the information you've given me but my best guess would be that your script is running before the DOM is fully loaded. If its incomplete and not all of the IMG's have been incorporated into the DOM yet, no "onload" function will be attached to the late comers, so it never will indicate that all have been loaded.

  5. #5
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,706
    The script is the last element in the HTML document, so once the script runs, everything else has loaded.

  6. #6
    Join Date
    Mar 2009
    Posts
    486
    Nothing may come of this but try substituting 'console.log' instead of 'alert.' I'm really not sure what happens when an alert freezes up the screen for events which are still occurring while the browser is waiting for the user to dismiss the "alert" notification.

  7. #7
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,706
    Basically, what I want is for a piece of script to run *after* all images have loaded.

  8. #8
    Join Date
    Jul 2013
    Posts
    66
    The easiest way would be to just attach your listener to window.onload as this will not fire before all images have loaded. Unless there is a good reason not to use this event, I would advise against handmade, fragile constructions – just take a look at the complexity of jQuery's cross-browser ready() function to see how difficult it can get.

    Is there any reason you prefix your variables with '$'? In any case, you accidentally declared your loop variable global, you might want to change that.

  9. #9
    Join Date
    Sep 2004
    Location
    At the corner of WALK and DONT WALK
    Posts
    1,706
    XSLT habit.
    Last edited by Mr Initial Man; 07-20-2013 at 05:32 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles