jQuery width() неверен при загрузке

#javascript #jquery

Вопрос:

Когда я загружаю свою страницу и использую $('div.logo').width() ее, возвращает огромное значение 6500 , что неверно. Изображение имеет ширину всего 130 пикселей.

Но, если я использую setTimeout и проверяю $('div.logo').width() через несколько секунд, он возвращает правильную ширину.

Почему это должно быть? Весь мой CSS должен быть уже загружен, так почему пауза в несколько секунд будет иметь значение?

1. Его причина в том, что при запуске вашего кода изображение не загружается.

2. Когда вы проверяете width использование $('.logo img').width() ? Возможно, изображение не загружается при проверке.

Ответ №1:

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

Так что либо:

 // NOTE: not $(document).ready
$(window).load(function() {
  var width = $('.logo img').width();
});

Или

 $('.logo img').load(function() {
  var width = $(this).width();
});

должен дать правильную ширину.

Ответ №2:

Установите атрибуты width и height для изображения. Вы также можете указать размер в CSS. Тогда браузер будет знать, какого размера будет изображение, прежде чем оно загрузится.

1. .width() получит вычисленную ширину, а не ширину атрибута: api.jquery.com/width

2. @mikedidthis если вы установите width attr img тега, то width на самом деле он будет img иметь значение, когда он будет отображаться браузером, так что это вычисленная ширина. Также рекомендуется устанавливать width и height для изображения, чтобы браузер знал это до загрузки изображения.

3. @t.niese это правда, но если OP CSS устанавливает max-width: 100% , то значение неверно.

4. @mikedidthis если OP установит значение css max-width: 100% равным , изображение будет иметь ширину 130px , а затем контейнер будет иметь ширину 100px $('div.logo').width() 100 . Но это произойдет в обоих случаях (независимо width от того, установлен attr или нет).

5. Ах, спасибо за разъяснение. Я согласился, что хорошей практикой является установка атрибутов width / height . Пример здесь, если кому-то интересно: jsbin.com/xasuf/1/edit

Ответ №3:

Это потому, что изображение еще не загружено, поэтому начальный размер основан на CSS или угадан. Вы можете использовать:

 $('.logo img').load(function() {
  var width = $(this).width();
});

Ответ №4:

Изображение загружается с GET помощью метода, поэтому вам нужно проверить его после,

 $('.logo img').load(function(){
  //your code
});

Если вы хотите, чтобы ваше изображение загружалось мгновенно, вы можете использовать изображение BASE64.
Более подробную информацию смотрите здесь

Ответ №5:

это может быть javascript, изменяющий макет страницы, например, это могут быть теги скрипта, включенные в нижнюю часть страницы, или любой другой код javascript, выполняемый в событиях jQuery ready или load. Например, если этот код добавляет html-код, это может повлиять на вашу ширину.логотип div.

Другая возможность заключается в том, что ваш html неверен, чтобы проверить это, просто запустите любой валидатор HTML следующим образом http://www.freeformatter.com/html-validator.html . Принимая HTML со своей страницы для проверки, имейте в виду, что некоторые браузеры исправляют неправильный HTML, поэтому лучше получить его из вашего исходного кода.