ширина элемента не определена в готовом документе - PullRequest
Новая
       19

ширина элемента не определена в готовом документе

3 голосов
/ 31 января 2012

Я пытаюсь получить ширину элемента, используя следующий код перед </body>

<script type="text/javascript" charset="utf-8">
    $(document).ready(function(){
        var diff = $('div.canvas img.photo').get(1).width;
        console.log(diff);
    });
</script>

но журналы не определены. Однако, если я запускаю $('div.canvas img.photo').get(1).width непосредственно в консоли Chrome / Firebug, он возвращает правильную ширину. Изображение не загружается с помощью Javascript, поэтому должно быть на месте, когда документ готов к работе. Что я делаю не так?

Ответы [ 4 ]

6 голосов
/ 31 января 2012

Нет, не должно. document.ready запускается, когда весь HTML загружен, но не изображения. Если вы хотите дождаться загрузки всех изображений, используйте window.load.

Пример: 

$(window).load(function(){
    var diff = $('div.canvas img.photo').get(1).width;
    console.log(diff);
});

Кроме того, как отмечали некоторые люди, вы пытались получить свойство ".width" дважды.

Если это вообще возможно, установите ширину графических тегов в CSS. Таким образом, вы можете безопасно использовать document.ready для своего кода. Использование window.load естественным образом задержит выполнение вашего скрипта, может быть секунда, может быть десять, в зависимости от скорости соединения клиентов и количества контента на вашей странице. Это может привести к нежелательным скачкам и дрожанию, если вы выполняете какие-либо стили.

1 голос
/ 31 января 2012

Ширина изображения будет доступна только после полной загрузки. jQuery также поддерживает событие onload для всех изображений.

Вы можете использовать, 

$('div.canvas img.photo').load(function(){
  // here the image (or all images which match selector) has been loaded.
}
1 голос
/ 31 января 2012

img не загружается в DOM ready. docs :

Хотя JavaScript предоставляет событие загрузки для выполнения кода при визуализации страницы, это событие не запускается, пока все ресурсы, такие как изображения, не будут получены полностью.В большинстве случаев сценарий может быть запущен, как только иерархия DOM будет полностью построена.Обработчик, переданный в .ready (), гарантированно будет выполнен после того, как DOM будет готов, поэтому обычно это лучшее место для присоединения всех других обработчиков событий и запуска другого кода jQuery.При использовании сценариев, которые зависят от значения свойств стиля CSS, важно ссылаться на внешние таблицы стилей или элементы встраивания, прежде чем ссылаться на сценарии.

изменить на это: 

$(window).load(function(){
            var diff = $('div.canvas img.photo').get(1).width;
            console.log(diff.width);
        });
0 голосов
/ 31 января 2012

Проблема в том, что ваше изображение еще не загружено, когда вы пытаетесь получить его размеры.Чтобы заставить его работать, оберните ваш код в $(window).load.Или другой вариант.Если вы знаете размеры изображения, которое можете предоставить атрибуты width и height, то оно будет работать даже внутри DOMContentLoaded.Иногда это предпочтительнее, потому что событие onload срабатывает дольше, чем 'DOMContentLoaded'.В противном случае вам нужно будет использовать $(window).load, см. @Andreas Carlbom answer.

...