Изображение не имеет ширины в документе. - PullRequest
Новая
       5

Изображение не имеет ширины в документе.

2 голосов
/ 28 сентября 2011

У меня есть функция, которую я хочу использовать для изменения размера изображений:

http://jsfiddle.net/eUurB/

Когда я запускаю ее на document.ready, она не имеет никакого эффекта;возвращаемое значение изображения равно 0 (вы можете заметить, что оно работает в скрипке ... Я не уверен, что причина этой несогласованности, если честно, но на моем тестовом сайте она определенно возвращает высоту и ширину '0'.

Это ожидаемое поведение? Если да, как я могу сделать простой слушатель, когда изображения имеют ширину?

Ответы [ 3 ]

5 голосов
/ 28 сентября 2011

Вот ультра-безопасный способ сделать это, не требующий ожидания загрузки всех изображений, и заботится о ситуациях, когда изображение может быть кэшировано или завершено до того, как DOM будет готов. 

$('#my_img').one('load',function(){
    resizeImgByArea('logo', 50);
})
  .filter(function(){
     return this.complete;
})
  .load();

  • .one('load',...) удаляет обработчик, как только он вызывается. Вам нужно только один раз.

  • .filter() вернет изображение, если оно уже было загружено. Если нет, он не возвращает элементов.

  • .load() вызовет обработчик вручную. Это произойдет, только если изображение уже загружено.

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

2 голосов
/ 28 сентября 2011

Из документов jQuery по методу jQuery(callback):

Эта функция ведет себя так же, как $(document).ready()

И когда мы перейдем к документам на $(document).ready(), мы найдем это:

Описание: укажите функцию, которая будет выполняться при полной загрузке DOM.

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

Вы можете получить этот элемент <img> и прикрепить прослушиватель событий load, но что, если изображение действительно действительно завершило загрузку, прежде чем вы смогли его прикрепить? Ваш обратный вызов никогда не будет выполнен.

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

$(window).load(function () {
    resizeImgByArea('logo', 50);
});
2 голосов
/ 28 сентября 2011

Изображения не загружаются в document.ready раз. Вместо этого используйте метод .load () jQuery . 

$('#logo').load( function() {
    resizeImgByArea('logo', 500);
});
...