Почему значение ширины устанавливается в ноль, когда страница обновляется в Chrome? - PullRequest
Новая
       13

Почему значение ширины устанавливается в ноль, когда страница обновляется в Chrome?

3 голосов
/ 13 марта 2012

Я написал некоторый код jQuery, в котором я получал ширину изображений на экране и сохранял их в переменной.Затем я зарегистрировал эту переменную в консоли, чтобы увидеть ее значение.Когда страница загружается в первый раз, она отображает правильное значение, однако, если я нажимаю F5, она отображает 0 в качестве ширины.

Вот HTML: 

    <body>
        <img src="img1.jpg" alt="image">
        <img src="img1.jpg" alt="image">
        <script type="text/javascript" src="script.js"></script>
    </body>

Вот код jQuery(script.js): 

    jQuery(document).ready(function($) {
        var imgs = $('img');
        var width = imgs[0].width;
        console.log(width);
    });

Консоль отображает 600, когда страница загружается впервые, но когда я нажимаю F5, она отображает 0.Почему это так?

Ответы [ 2 ]

7 голосов
/ 13 марта 2012

В jQuery(document).ready() раз нет никакой гарантии, что изображения еще загружены.Изображения должны быть загружены, чтобы получить их ширину.Изображения загружаются асинхронно и могут завершаться после jQuery(document).ready() срабатываний.

Чтобы точно знать, что изображение загружено, вам необходимо иметь обработчик onload для этого конкретного изображения, чтобы вы могли знать, когда онозагружены или вам нужно проверять ширину изображения только тогда, когда все изображения на странице загружены с window.onload или в jQuery $(window).load(fn).

. Самое простое, что можно сделать, это изменить код на этот: 

jQuery(window).load(function() {
    var imgs = jQuery('img');
    var width = imgs[0].width;
    console.log(width);
});

Лично я бы порекомендовал вам использовать такие методы jQuery .height() и .width(), как этот: 

jQuery(window).load(function() {
    var imgs = jQuery('img');
    var width = imgs.eq(0).width();
    console.log(width);
});

Вы можете увидеть эту работу здесь: http://jsfiddle.net/jfriend00/D4CyN/

0 голосов
/ 20 января 2014

Если вы знаете размеры изображения, поместите их в разметку: 

<img src="img1.jpg" width="600" height="…">

Тогда вы никогда не получите ширину 0.: D

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...