Вопрос по image, jquery, javascript – Jquery img, добавленный через append (), дважды запускает onload

5

Код, который вызывает у меня головную боль, довольно прост:

$(function(){ 
$("#test").append('<img onload="alert(\'hi\')" src="Image.jpg"/>');
})

У меня есть код выше в моей голове и div с id 'test' apos; в теле. Теперь моя проблема заключается в том, что страница выдает два оповещения, когда изображение загружается, но я ожидал, что оно выдаст только одно в качестве «onload». должен быть запущен только один раз - так, как это происходит, когда я добавляю изображение вручную без JavaScript.
Посмотрите на скрипку, которую я сделал на:http://jsfiddle.net/9985N/

Любая помощь / объяснение очень ценится ...

С помощью.html(...) метод это исправит, но я понятия не имею, почему это происходит Teneff
Может быть оффтоп, но вы никогда не должны прикреплятьload на изображениях. Jashwant
w3shools может не обеспечивать хороших вещей для обучения, но полезен для ссылок на элементы, о упомянутых предостережениях. @ jquery api site - кажется разумным, но это не значит, что мы не должны «никогда» его использовать (насколько я понимаю) ... Единственная особенность, которая мне здесь нужна, была совместимость между браузерами, и она подходит для большинства современных браузеров (например: я не хочу, чтобы функция вызывалась, если изображение кэшируется ..) Erric
Сначала посмотри на это W3fools а потомjQuery load Jashwant
@ Jashwant: Не могли бы вы объяснить, почему? Потому что я не вижу, что парни w3c упоминают об этом по адресу: W3schools.com / jsref / event_img_onload.asp Erric

Ваш Ответ

2   ответа
6

Потому что.append сначала создает узел, а затем перемещает его в соответствующую позицию. Попробуйте сначала добавить элемент, а затем добавить его атрибуты следующим образом:

$(function() {
    $("#test").append(
        $("<img />").attr({
            src: "http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg",
            onload: "alert(\'hi\')"
        })
    );
});

Мой ответ не «избегает» проблемы, он отвечает на нее очень прямо. Если вы откроете файл jQuery.js в несжатом формате, вы ясно увидите, что.append создаетnode на документе, который когonload событие сначала вызывается, а затемshifts это в положение, когда его снова вызывают. Возможно, слово «сдвиг» - неправильное слово, прости меня, так как словарный запас - не моя сильная сторона. Однако, если вы следуете коду, вы видите его создание и его перемещение, однако это не относится к использованию append снова для его перемещения, так как узел уже создан, он просто перемещается от одного элемента к другому без повторного появления нагрузки. Как я уже сказал, не уверен, лучшая терминология, но очень легко следовать на Jquery.js.

Не веришь мне? Только что проверил следующее Скрипка в MSIE9, FF12 и GoogleChrome20 с 0 проблемами.

JsFiddle

Просто к вашему сведению, это не совсем ужасная практика, но я вижу, что люди все время пишут целые строки HTML в jQuery, и это побеждает цель. Это библиотека с множеством книг для чтения нарочно. Иногда полная строка HTML может показаться более простой, но она не может быть быстрее, так как она не соответствует всей великолепной работе над макетом, которая была сделана для вас. Идея состоит в том, чтобы «писать меньше, делать больше», и это включает в себя HTML. В конце концов, если вы собираетесь написать целую строку HTML, зачем вообще использовать jQuery, если вы можете просто написать PHP !? : P Просто мысль.

-1 Ваш ответ позволяет избежать проблемы. На самом деле предупреждение отображается дважды, даже не добавляя объект в любом месте ... просто оборачивая его внутри$('<img...'). Проверь эт Teneff
Почему быappend сдвинуть его, если это единственный элемент? Jashwant
@ tenneff: замечательно - к сожалению, это еще больше увеличивает путаницу - это ошибка jquery? Erric
btw, перемещение изображения не вызовет повторной загрузки, не так ли? Erric
Вау, обновление действительно проясняет ситуацию, но все же ты не мог бы объяснить, что происходит, когда мы пишем $ ('<img ...'), как сказал Тенефф? Erric
0

или это

var img = $('<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/1a/Bachalpseeflowers.jpg/300px-Bachalpseeflowers.jpg"/>').on('load', function(){
    $('#test').append(img);
    alert('loaded');  
});
Немного отличается от проблемы - ваш код добавляется при загрузке изображения, верно? (Я говорил об обратном) Erric

Похожие вопросы