Home/ Questions/Q 7636685
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T07:44:48+00:00

I wrote some jQuery code in which I was getting the width of images

  • 0

I wrote some jQuery code in which I was getting the width of images on screen and storing them in a variable. Then I logged that variable in the console to see it’s value. When the page loads for the first time, it displays correct value, however if I press F5, it displays 0 as the width.

Here’s the HTML:

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

Here’s the jQuery code (script.js) :

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

The console displays 600 when the page is loaded for the first time but when I press F5 it displays 0.
Why is it so?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    At jQuery(document).ready() time, there is no guarantee that images are loaded yet. Images must be loaded in order to get their width. Images are loaded asynchronously and may finish after jQuery(document).ready() fires.

    To know for sure that an image is loaded, you either need to have an onload handler for that specific image so you can know when it is specifically loaded or you need to only inspect the image widths when all the images in the page are loaded with window.onload or in jQuery $(window).load(fn).

    The simplest thing to do would be to change your code to this:

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

    Personally, I would recommend that you use jQuery’s .height() and .width() methods like this:

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

    You can see this one work here: http://jsfiddle.net/jfriend00/D4CyN/

    • 0