jquery - “开”不适用于“加载”事件

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

我不确定我是否得到了这个问题，但请尝试将其放在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';
}

Answer 2

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

• 它不能始终如一地工作，也不能可靠地跨浏览器
• 如果图像 src 设置为与以前相同的 src，它不会在 WebKit 中正确触发
• 它没有正确地冒泡 DOM 树
• 可以停止对已经存在于浏览器缓存中的图像进行触发

从这里