隱藏和顯示圖像加載

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";
      };