“On”不适用于“Load”事件

Question

我试图在图像上附加加载事件，而不等待文档完成加载。因此，我使用$.on来实现此目的，而不是将我的代码放在页面底部，但它仍无效。

我的HTML就像：

<script>
  $('img').on('load', function(){
    $(this).css('border', '2px solid red');
  });
</script>

<img src="koala.png" />

这实际上并不奏效，但这样做:(这不是我想要的）

<img src="koala.png" />

<script>
  $('img').bind('load', function(){
    $(this).css('border', '2px solid red');
  });
</script>

无论如何都可以解决这个问题吗？

Answer 1

应该注意有几个已知的警告。

• 它不能始终如一地工作，也不能可靠地跨浏览器
• 如果图像src设置为，则在WebKit中无法正确触发 和以前一样的src
• 它没有正确地冒泡DOM树
• 可以停止触发已存在于浏览器缓存中的图像

来自here

Answer 2

我不确定我是否会得到这个问题，但请尝试将此放在> DOM中的图片中

var images = document.getElementsByTagName('img');

for (i=0; i<images.length; i++) {
    var img = new Image();
        img.src = images[i].src;
        img.onload = loaded(images[i]);
}

function loaded(image) {
    image.style.border = '20px solid red';
}