隐藏和显示图像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部分时，firebug告诉我document.images[i]是undefined。有人能告诉我我做错了什么吗？

Answer 1

尝试类似：

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

并查看on

Answer 2

尝试在addEventListener处理程序中使用this。

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

您也可以尝试

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