Question

I’m working on a simple script that will hide my images until they’re fully loaded, then reveal them.

$(document).ready(function(){
    for(var i=0; i<document.images.length; i++){                   
        document.images[i].style.visibility="hidden";
        document.images[i].addEventListener("load", function(i){
            document.images[i].visibility="visible"; 
        }, false);
     } 
});

For some reason, when the loop gets to the addEventListener part, firebug tells me that document.images[i] is undefined. Can someone tell me what I’m doing wrong?

Answer 1

try using this inside the addEventListener handler.

document.images[i].addEventListener("load", function(){
                this.visibility="visible"; 
                }, false);

you can also try

document.images[i].onload = function(){
             this.visibility="visible";
      };