如何使用jQuery live()进行img onload事件?

时间:2011-07-05 20:52:43

标签: javascript html onload jquery

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

我试过了:

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

除了load之外,我还尝试了onloadonLoad。当我用'click'替换时,所有工作都按预期工作,所以我知道这不是一些干扰错误。

我无法找到live()函数的可用事件类型列表,因此,据我所知,可能无法实现。

3 个答案:

答案 0 :(得分:18)

(它是load,而不是onloadonLoad。)

load没有冒泡(根据img entry in the HTML5 spec,它是"simple event",不会冒泡),因此您无法将其与live一起使用或delegate,它依赖于从元素冒泡到其祖先元素的事件。

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

答案 1 :(得分: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" />

答案 2 :(得分:0)

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