Как использовать jQuery live () для события img onload?

Question

Я хочу запустить некоторый код при загрузке изображения.Кроме того, я хотел бы сделать это ненавязчиво (не inline).Точнее, я хочу использовать функцию jQuery live(), чтобы это происходило с любыми динамически загружаемыми изображениями.

Я пробовал:

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

В дополнение к load, япробовал onload и onLoad.Когда я заменяю на «щелчок», все работает как положено, поэтому я знаю, что это не какая-то мешающая ошибка.

Мне не удалось найти список доступных типов событий для функции live(), поэтому для всехЯ знаю, это может быть невозможно.

Answer 1

(это будет load, а не onload или onLoad.)

load не пузырится (согласно записи img в спецификации HTML5 , это "простое событие" , которое не всплывает), поэтому вы не можете использовать его с 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