js代码需要调整

Question

我想让我网站上的所有图片在加载时都有“Fadein”效果 完了，所以这段代码有什么问题？ ！

<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.length，因此未设置x[i]。

当事件侦听器函数运行时，this是它绑定的元素。使用this代替x[i]。

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