Некоректное поведение Google Chrome при вычислении ширины изображения. Как пофиксить?
Собственно сабж.
Использую последнюю версию jQuery, на странице есть изображение и есть код вида:
var width = $('img').width();<br>
Только этот код работает как-то криво в Google Chrome (последняя версия), тогда как в остальных браузерах все работает окей.
В чем нерабочесть?
Пишу что-то вроде console.log(width), перезагружаю страницу, в консоль падает «0». По F5 перезагружаю — без результата. Однако если встать курсором именно в адресную строку и нажать Enter, все тут же магическим образом начинает работать, т.е. в консоле появляется нужное мне значение. Но стоит снова нажать F5, как результать снова сбрасывается.
Что за ерунда? Как пофиксить? И почему страдает только Хром? Даже IE7 корректно работает.
О, спасибо за наводку!
Просто заменил $(document).ready(function() {....}) на $(window).load(function() {....}), сразу все стало корректно работать. Есть какие-либо у этого метода недостатки, не в курсе?
Единственный — что код не будет выполняться, пока не прогрузятся ВСЕ связанные с документом файлы. Все картинки, все скрипты, все CSS-ки, все favicon-ы, все счётчики, все баннеры…
ready происходит после того, когда был загружен HTML-документ, а onload происходит позже, когда всё содержимое (например, вот, изображения) также было загружено.
onload — стандартное событие в DOM, а ready — специфика же jQuery. ready используют, когда что-то должно произойти как можно раньше, сразу после загрузки документа. Т.е. это обычно код, который добавляет функциональности к элементам на странице, чтобы с ними можно было начать работать, не ожидая загрузки всего контента.
Ну это необходимое зло, как я понял, если необходима работа с контентом страницы, т.е. в моем случае с изображениями.
Т.е. как я понимаю ready — это загрузка скелета страницы, без контента и прочего, чисто разметка, load уже после того, как вообще все загружено.
Согласен с Evengard, что onload на изображении — наиболее целевое решение, а onload по документу будет зависеть от ряда посторонних случайностей (незагрузки чего-либо), т.е. неверно.
Ну про load на картинку я тоже думал и даже сделал, только там не одно изображение, а несколько (произвольное количество, если быть точнее). Думал указателем выбрать последнюю картинку, либо указать на детей блока, в котором лежат эти картинки.
Смысл? jQuery у меня начинается стандартным $(document).ready(function() {....}), такая конструкция автоматически подразумевает выполнение кода после загрузки страницы. Плюс, у меня еще есть аналогичная строка, но там определяется количество элементов входящих в блок, он работает корректно. Даже менял местами, все равно определение ширины не работает.
Да и почему после того как в адресную строку становлюсь курсором и обновляю энтером все окей работает. Плюс во всех других браузерах все работает, глючит только хром.
DOM Ready не означает, что картинка прогрузилась. Картинка могла по каким-то причинам не прогрузиться в то время, когда срабатывает этот event. То, что работает в других браузерах — скорее везение, ИМХО.
Да, похоже так и есть, сейчас сам в этом убедился, повешав таки на body событие load и вызов функции при его срабатывании. Какое-то некрасивое решение, хочется все-таки несколько по другому, по-изящнее несколько. но за инфу все равно спасибо, буду теперь знать куда копать хотя бы.
Средний
