В вашем первом коде вы ищете элемент #google
и говорите ему, чтобы он уведомлял вас, когда загружается его изображение.Однако в то время, когда выполняется javascript ( над элементом в коде), существует существует no #google
элемент, и, таким образом, прослушиватель событий не назначается чему-либо.
К сожалению, добавление прослушивателя событий внутри DOMReady
прослушивателя также не всегда решит проблему.Если, например, изображение уже находится в кэше браузера, событие загрузки #google
может произойти до DOMReady
.Похоже, самый безопасный подход - подключить слушателя немедленно после , когда изображение будет создано.
<img src="http://www.google.com/images/logos/ps_logo2.png" id="google" />
<script type="text/javascript">
$('#google').load(function() {
alert('ok');
});
</script>
Рабочий пример
Если выне довольный тем, что вставлял блок скрипта в середину вашего кода, но хотел бы отложить ваш скрипт на какое-то место позже, вы всегда можете слушать $(window).load()
вместо $('#google').load()
.Это эквивалентно <body onload="">
, т.е. оно будет работать, когда весь внешний контент был загружен.Поэтому, когда происходит $(window).load()
, вы знаете, что ваше #google
изображение загружено, но оно не обязательно будет немедленно после его загрузки.