Событие Bind / Live Load для динамического HTML img не работает - PullRequest
Новая
       5

Событие Bind / Live Load для динамического HTML img не работает

3 голосов
/ 24 октября 2011

В этом примере я могу получить следующий код для создания динамического изображения в элементе div#add при нажатии кнопки, но событие загрузки для img не работает. 

 <html>
 <head>
 <title>None!</title>
<script type="text/javascript" src="Scripts\jquery-1.6.2.min.js"></script>
 </head>                                                                 
 <body>
    <button id="click">Click</button>
 <div id="add"></div>

 <script>
    $(document).ready(function(){
        $('#click').click(function() {
            $('div#add').append('<img src="./images/imagename.jpg" />');
        });

        $('img').bind('load',function(){
            alert('test');
        });
    });
 </script>

 </body>                                                                 
 </html>

Я также попытался установить событие onload для динамического img, но событие не было запущено.Любая помощь приветствуется.

Обновление (2011-10-24 18:55 EST) : похоже, что документация JQuery для Load-Event сообщаетследующее.

Предупреждения о событии загрузки при использовании с изображениями

Распространенная задача, которую разработчики пытаются решить с помощью ярлыка .load (), заключается в выполнении функции, когда изображение (или коллекция изображений) полностью загружены.Есть несколько известных предостережений с этим, которые следует отметить.Это:

- Он не работает согласованно и надежно в разных браузерах.
- Он не работает корректно в WebKit, если для src изображения установлено то же значение src, что и раньше
.не правильно всплывает дерево DOM
- Может перестать срабатывать для изображений, которые уже находятся в кэше браузера

Я думаю, использование события загрузки не является отказоустойчивым, кросс-браузеррешение.

Обновление (2011-10-28 15:05 EST) : Благодаря @Alex я смог использовать его плагин waitForImages и сделать слушателя(Я не уверен, что это правильный термин), чтобы определить, когда было загружено изображение. 

<html>
<head>
<title>None!</title>
<script type="text/javascript" src="Scripts\jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="Scripts\jquery.waitforimages.js"></script>
</head>                                                          
<body>

<button id="click">Click</button>
<div id="add"></div>


<script>
$(document).ready(function(){
    setInterval(function(){
        $('div#add img.art').waitForImages(function() {
            $('div#add img.load').hide();
            $(this).show();
        });
    }, 500);

    $('#click').click(function() {
        $('div#add').append('<img class="load" src="./images/loading.gif" /><img style="display:none;" width="199" class="art" src="./images/imagename.jpg" /><br />');
    });
});
</script>

</body>                                                                 
</html>

Так что сейчас существует максимальная задержка в 500 мс при определении, было ли загружено изображение,Это кажется разумным?Это лучший способ проверить, был ли загружен динамически созданный тег img?

Выдающийся: я должен остановить запуск функции setInterval после загрузки всех изображений.Я все еще должен проработать детали этого.

1 Ответ

3 голосов
/ 24 октября 2011

Измените bind() на on() и измените аргументы соответствующим образом.

Когда вы просто bind(), он связывается со всеми элементами в DOM. Когда вы используете on(), он ищет события, всплывающие у вашего общего предка, а затем проверяет их происхождение и запускает все прикрепленные события.

Это означает, что он будет обрабатывать все будущие img элементы.

...