如何使用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