Question

我希望在所有图片加载后都能获得警报。此代码适用于除

之外的所有浏览器

$('img').load(function(){    
  alert('hello')
});

不在ie9工作。任何解决此问题的工作

Answer 1

如果您定位的图片位于文档的HTML中，并且此代码位于文档中的所有图片之后，那么图片可能已经完成加载，然后才能真正运行此javascript：

$('img').load(function(){    
  alert('hello')
});

这意味着您很容易错过.load()事件，因为它会在您附加事件侦听器之前发生。如果图像在浏览器缓存中，则更有可能发生这种情况。

你可以做的是这样的事情：

<img src="xxx.jpg">
<img src="yyy.jpg">
<img src="zzz.jpg">

<script>
$('img').each(function() {
    if (this.complete) {
       // image already loaded (it finished before our javascript could run)
       console.log("image already loaded: " + this.src);
    } else {
        // it isn't loaded yet so set a load event handler to tell us when it does finish
        $(this).load(function() {
           console.log("image load event fired: " + this.src);
        });
    }
});
</script>

如果您只想知道页面HTML中的所有图片是否已完成加载，您可以使用window.load事件：

$(window).load(function() {
    console.log("all images loaded now");
});

Answer 2

这个问题很可能源于这个基本问题：

var i = new Image();
i.src = '/path/to/image'; // already cached by browser
i.onload = function() {
    alert('loaded!'); // will never get called
};

也就是说，浏览器已经有了一种机制来告诉你何时加载了所有图像（和其他外部资源）：

$(window).load(function() {
    alert('hello'); 
});

Answer 3

请尝试在文档准备中使用

$(document).ready(function(){
   $('img').load(function(){    
     alert('hello')
   });
});

jquery加载功能在Internet Explorer 9中不起作用

3 个答案: