Некоректное поведение Google Chrome при вычислении ширины изображения. Как пофиксить?

Question

[Genome_X]

Собственно сабж.

Использую последнюю версию jQuery, на странице есть изображение и есть код вида:



var width = $('img').width();<br>



Только этот код работает как-то криво в Google Chrome (последняя версия), тогда как в остальных браузерах все работает окей.



В чем нерабочесть?

Пишу что-то вроде console.log(width), перезагружаю страницу, в консоль падает «0». По F5 перезагружаю — без результата. Однако если встать курсором именно в адресную строку и нажать Enter, все тут же магическим образом начинает работать, т.е. в консоле появляется нужное мне значение. Но стоит снова нажать F5, как результать снова сбрасывается.



Что за ерунда? Как пофиксить? И почему страдает только Хром? Даже IE7 корректно работает.

Answer 1

[freeek]

В document.ready изображения могут и не подгружаться, возможно, когда их нет в кэше, вы и видите 0.

Попрбуйте:

var img_width = 0;
$(window).load(function() {
    img_width+=$('img').width();
});

Comments

[Genome_X]

О, спасибо за наводку!
Просто заменил $(document).ready(function() {....}) на $(window).load(function() {....}), сразу все стало корректно работать. Есть какие-либо у этого метода недостатки, не в курсе?

[Evengard]

Единственный — что код не будет выполняться, пока не прогрузятся ВСЕ связанные с документом файлы. Все картинки, все скрипты, все CSS-ки, все favicon-ы, все счётчики, все баннеры…

[freeek]

ready происходит после того, когда был загружен HTML-документ, а onload происходит позже, когда всё содержимое (например, вот, изображения) также было загружено.

onload — стандартное событие в DOM, а ready — специфика же jQuery. ready используют, когда что-то должно произойти как можно раньше, сразу после загрузки документа. Т.е. это обычно код, который добавляет функциональности к элементам на странице, чтобы с ними можно было начать работать, не ожидая загрузки всего контента.

Как-то так :)

[Genome_X]

Ну это необходимое зло, как я понял, если необходима работа с контентом страницы, т.е. в моем случае с изображениями.
Т.е. как я понимаю ready — это загрузка скелета страницы, без контента и прочего, чисто разметка, load уже после того, как вообще все загружено.

[Evengard]

Верно

[Evengard]

На самом деле, чтобы не ждать лишнего, МБ можно сделать прямо так:

$("#myImage").load(function(){
img_width=$("#myImage").width();
});

[spmbt]

Согласен с Evengard, что onload на изображении — наиболее целевое решение, а onload по документу будет зависеть от ряда посторонних случайностей (незагрузки чего-либо), т.е. неверно.

[Genome_X]

Ну про load на картинку я тоже думал и даже сделал, только там не одно изображение, а несколько (произвольное количество, если быть точнее). Думал указателем выбрать последнюю картинку, либо указать на детей блока, в котором лежат эти картинки.

[Evengard]

Советую дополнительно почитать:
api.jquery.com/load-event/
Там по поводу кроссбраузерности любопытные заметки в комментах.

Answer 2

[Genome_X]

Аррррр!
В общем всем заинтересованным на заметку: читать различие между $(document).ready и $(window).load

Answer 3

[Evengard]

В onload обернуть не пробовали?

Comments

[Genome_X]

Смысл? jQuery у меня начинается стандартным $(document).ready(function() {....}), такая конструкция автоматически подразумевает выполнение кода после загрузки страницы. Плюс, у меня еще есть аналогичная строка, но там определяется количество элементов входящих в блок, он работает корректно. Даже менял местами, все равно определение ширины не работает.

[Genome_X]

Да и почему после того как в адресную строку становлюсь курсором и обновляю энтером все окей работает. Плюс во всех других браузерах все работает, глючит только хром.

[Evengard]

DOM Ready не означает, что картинка прогрузилась. Картинка могла по каким-то причинам не прогрузиться в то время, когда срабатывает этот event. То, что работает в других браузерах — скорее везение, ИМХО.

[Genome_X]

Да, похоже так и есть, сейчас сам в этом убедился, повешав таки на body событие load и вызов функции при его срабатывании. Какое-то некрасивое решение, хочется все-таки несколько по другому, по-изящнее несколько. но за инфу все равно спасибо, буду теперь знать куда копать хотя бы.

[Evengard]

$(window).load — jQuery-way — должно работать…

[Genome_X]

Да, спасибо, действительно все работает, сейчас просвящаюсь.