Сокрытие и показ изображений

Question

Я работаю над простым сценарием, который будет скрывать мои изображения до полной их загрузки, а затем раскрывать их.

$(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);
     } 
});

По какой-то причине, когда цикл достигает части addEventListener, firebug говорит мне, что document.images[i] равно undefined. Может кто-нибудь сказать мне, что я делаю не так?

Answer 1

Попробуйте что-то вроде:

$(function () {
  $('img').css('visibility', 'hidden');
  $('img').on('load', function () {
    $(this).css('visibility', 'visible');
  });
});

и посмотрите на on

Answer 2

попробуйте использовать this внутри обработчика addEventListener.

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

вы также можете попробовать

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