Google Chrome is doing something wrong again

Question

Chrome incorrectly reports width and height values for images during, or immediately after, load time. jQuery is used in this code example:

<img id='image01' alt='picture that is 145x134' src='/images/picture.jpg' />

<script>
 var img = $( 'img#image01' )

 img.width() // would return 145 in Firefox and 0 in Chrome.
 img.height() // would return 134 in Firefox and 0 in Chrome.
</script>

If you put the script in a function $(function(){}), the result will be the same. but if you run the code a few seconds after the page loads, Chrome will return the correct result.

<script>
  function example () {
    var img = $( 'img#image01' );

    img.width() // returns 145 in both Firefox and Chrome.
    img.height() // returns 134 in both Firefox and Chrome.
  }
  window.setTimeout( example, 1000 )
</script>

Also, if you specify the width and height values in the img tag, the script works as expected as in Firefox and Chrome .

<img id='image01' src='/images/picture.jpg' width=145 height=134 />

html, . jQuery ? ?

Answer 1

, inline, , , . , onload, . onload? . , jQuery ready onload, . , load window load. jQuery ready .

, :

$(window).bind('load', function() {
    var img = $("#theimage");
    log("Width: " + img.width());
    log("Height: " + img.height());
});

... ( log - , ), :

$(document).ready(function() {
    $("#theimage").bind('load', function() { // BUT SEE NOTE BELOW
        var img = $(this);
        log("Width: " + img.width());
        log("Height: " + img.height());
    });
});

... :

$(document).ready(function() {
    var img = $("#theimage");
    log("Width: " + img.width());
    log("Height: " + img.height());
});

... .

. : " load ( window), , , load . :

$(document).ready(function() {
    var img, imgElement;

    // Find the image
    img = $("#theimage");
    imgElement = img[0];
    if (imgElement && imgElement.complete) {
        // Already loaded, call the handler directly
        loadHandler.call(imgElement);
    }
    else {
        // Not loaded yet, hook the event
        img.bind('load', loadHandler);
    }

    function loadHandler() {
        var img = $(this);
        log("Width: " + img.width());
        log("Height: " + img.height());
        img.unbind('load', loadHandler);
    }
});

loadHandler , ready.

Answer 2

. img 0x0, . , . - :

$("img#image01").load(function(){
  //do things here
});

Answer 3

$('#img2').show(function() {
    if( $.browser.safari ){
      alert ( $('#img2').width() );
    }
});

.load Chrome, .show;)

Answer 4

$(document).ready(function(){
});

if that doesn't help, use jQuerys . load () function

var $img = $('#image01'),
    iwidth = 0,
    iheight = 0;

$(document).ready(function(){
   $img.load(function(){
        var img = $('#image01');

        img.removeAttr('width').removeAttr('height').css({width: '', height: ''});

        iwidth  = this.width;
        iheight = this.height;
   });
});

$img[0].src = '';
$img[0].src = $img[0].src;