如何使用jQuery live（）进行img onload事件？

Question

我想在加载图像时运行一些代码。 另外，我想不引人注目地进行（不是内联）。 更具体地说，我想使用jQuery的live()函数，因此任何动态加载的图像都会发生这种情况。

我试过了：

<img class="content_image" alt="" src="..." />
<script>
    $('.content_image').live('load', function() {
      alert('loaded!');
    });
</script>

除了load ，我还尝试过onload和onLoad 。 当我用'click'替换时，所有工作都按预期工作，所以我知道这不是一些干扰bug。

我无法找到live()函数的可用事件类型列表，所以我知道，这可能是不可能的。

Answer 1

（这将是load ，而不是onload或onLoad 。）

load不会冒泡（根据HTML5规范中的img条目 ，它是一个“简单事件” ，它不会冒泡），所以你不能将它用于live或delegate ，它依赖于从一个冒泡的事件元素到它的祖先元素。

你必须将它挂钩到各个img元素上（并且在设置它们的src 之前这样做，否则你可能会错过它;并且总是记得也要注意error ）。 （是的，你真的可以错过它： 浏览器不是单线程的，只是JavaScript主线程。如果你设置src并且图像在缓存中或者很快就可用，浏览器可以触发事件。事件的方式是触发器是浏览器查看当事件被触发时注册的处理程序，并在JavaScript主线程返回浏览器时对要调用的处理程序进行排队。如果没有注册处理程序，则它们不排队，你永远不会得到回调。）

Answer 2

它有点脏，但它有效：

<script type="text/javascript">
    var loop = setInterval(function() {

           // the img to watch
           var $img = $("img.hi");

           if( !!$img.length && $img[0].complete ) {
               // clear the timer
               clearInterval(loop);

               alert("loaded !");

           }

    }, 30);        
</script>

<img class="hi" src="http://www.google.fr/images/nav_logo72.png" />

Answer 3

最后我偶然发现了这个jQuery插件： https ： //github.com/desandro/imagesloaded