Почему jQuery с img width не работает с первой попытки?

Question

Не уверен, смогу ли я объяснить это адекватно, но здесь это идет. Я делаю наведение на точку и показываю картинку с рамкой / фоном и подписью. Все это на самом деле работает очень хорошо, кроме самого первого раза, когда я парю ...

Я пытаюсь получить ширину изображения с помощью следующего кода:

/* Retrieve the width of the image */
var trashImg = new Image(); // declare an image object
trashImg.src = this.href;   // instanciate it to the current image
IMG_WIDTH = trashImg.width; // get the width of the image

Проблема в том, что при первом наведении курсора он корректно извлекает trashImg.src, но trashImg.width возвращает 0 (ноль). Во второй раз при наведении курсора «trashImg.width» возвращает правильный размер. У меня есть этот код внутри функции "jQuery (document) .ready (function ($) {..."), поэтому предположительно изображение загружается в этот момент.

Я часами смотрю на этот код и не могу понять, почему. У кого-нибудь есть идеи? Спасибо.

Answer 1

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

Вы должны включить проверку width в обработчик событий load изображения:

trashImg.onload = function() { IMG_WIDTH = trashImg.width; } 
trashImg.src = this.href;  // Remember to do this AFTER defining the load handler

(может быть возможно сослаться на изображение как this вместо trashImg внутри функции загрузки, но сейчас я не уверен, будет ли это работать полностью, как ожидалось)

Обратите внимание, что выне знаю, когда сработает событие load, поэтому вам нужно поместить в эту функцию весь код, который зависит от IMG_WIDTH (или вызвать его оттуда).

Хотя обычно это работает,Событие load на изображениях имеет некоторые известные ненадежности, о которых полезно знать.Из руководства jQuery :

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

Распространенной проблемой, которую разработчики пытаются решить с помощью ярлыка .load (), является:выполнить функцию, когда изображение (или коллекция изображений) полностью загружены.Есть несколько известных предостережений с этим, которые следует отметить.Это:

• Он не работает согласованно и надежно кросс-браузерно
• Он не работает корректно в WebKit, если для src изображения установлен тот же src, что и раньше
• Не правильно всплывает дерево DOM
• Может перестать срабатывать для изображений, которые уже находятся в кеше браузера

Answer 2

Из-за способа, которым я написал свой код, единственным способом, которым я смог сделать эту работу, была предварительная загрузка изображений.

$('div.imgTooltip').children().each(function(){
    /* Preload the images */
    var trashImg = new Image(); // declare an image object
    trashImg.src = this.href;   // instantiate it to the current image
    $('.profile').append(trashImg); // insert preloaded image into the DOM tree
});

Сейчас к тому времени этот код

/* Retrieve the width of the image */
var trashImg = new Image(); // declare an image object
trashImg.src = this.href;   // instanciate it to the current image
IMG_WIDTH = trashImg.width; // get the width of the image

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

Answer 3

document.ready не означает, что все изображения уже загружены, просто загружена «базовая структура» (так что вы знаете, что можете найти все идентификаторы и т. Д.). Вы можете проверить функцию load (): http://api.jquery.com/load-event/, чтобы сделать это правильно