jsコードを調整する必要があります

Question

をロードするときに私のウェブサイト内のすべての画像に「フェーディン」エフェクトが適用されるようにしたいのですが、このコードの問題点は何ですか？ ！イベントハンドラが実行され、あなたのコードで

<img 
src="http://1.bp.blogspot.com/-M03SoTLlJ4k/Vfwvq2dz42I/AAAAAAAAD9I/o-xN8x6HL2Y/s1600-r/Untitled-1%2B%25281%2529.png" id="image_id"/> 
<style> 
#image_id { 
opacity:0; 
transition:1s; 
} 
</style> 
<script> 
var i; 
var x = document.getElementsByTagName("img"); 
for (i = 0; i < x.length; i++) { 
    document.getElementsByTagName("img")[i].addEventListener("load", imgfadein); 
    }; 
function imgfadein() { 
x[i].style.opacity = "1";   
} 
</script> 

Answer 1

、iはそうx[i]が設定されていない、x.lengthです。

イベントリスナー機能が実行されると、thisがバインドされた要素になります。 x[i]の代わりにthisを使用してください。

function imgfacein() { 
    this.style.opacity = "1"; 
}