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

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 части, поджигатель говорит мне, что document.images[i] является undefined. Может ли кто-нибудь сказать мне, что я делаю неправильно?

Answer 1

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

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

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

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

Answer 2

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

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

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