Question

I have weird problem which i find very difficult to reproduce on jsfiddle. Best i could do was this but this works every time printing out correct width and height every time.

Same time it works only like 50% of times. Other times it gets 0 as image size and width.

My HTML is:

<div role="main" id="main">
<div class="row">
    <div class="twelve columns" style="float:none;">
            <img src="/media/files/clientfiles/test1_X-1a_.png" id="editorImage">
    </div>
    <div class="four columns">zalalal</div>
</div>
</div>

matching css is:

#main {
width: 1000px;
margin: 50px auto;
background: white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.23);
-webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.23);
box-shadow: 0px 0px 5px rgba(0,0,0,0.23);
color: #666;}

.row {
width: 1000px;
max-width: 100%;
min-width: 768px;
margin: 0 auto;
}

.row .twelve {
width: 75%;
}

.column, .columns {
float: left;
min-height: 1px;
padding: 0 10px;
position: relative;
}

and javascript is

jQuery(function($){
        var element = $('#editorImage');
        console.log(element);
        console.log(element.width());
        console.log(element.height());
        console.log(element.outerWidth());
        console.log(element.outerHeight());
        console.log(element.offsetWidth);
        console.log(element.offsetHeight);
});

at first i thought its related to trying to get element size before document ready, but jQuery(function($... should take care of that, no?

Answer 1

You should trap on window.load, not document.ready.

The latter waits for the DOM tree to become ready, but the former is necessary if you want to also wait for all images to load, too.

$(function() {
    // do DOM ready related stuff here
});

$(window).on('load', function() {
    // do image related stuff here
});