In what way does Firefox and IE treat the image-object diffrent from Webkit?
<p>I'm working on a script that adds a class to images, based on if the background-image is landscape or portrait.</p>

<p>Here is the function:</p>

<pre><code>function loadImg (mythis, callback) {
    var src = getUrl($(mythis).css('background-image'));


    var t = new Image();
    t.src = src;

    console.log(t.height);

    var height = t.height;
    var width = t.width;
    if(width &gt; height){
        $(mythis).parent().addClass('panorama');    
        $(mythis).parent().parent().removeClass('smallpost');                    

}
</code></pre>

<p>This great in Webkit, but not in Firefox or IE. The problem is with t.height and t.width, they are always Zero in these browsers. One challenge with this solution is that the images needs to be loaded before the function is run. Because the images are background-images and not in the DOM, I ended up just adding a delay before the script runs. I know it's a bit sinful, but really an acceptable solution in this case. Not sure if that has anything to do with my problems though.</p>

<p>Full javascript:
    $(function(){</p>

<pre><code>    setTimeout(function(){
        var elems = $('.post .crop'), count = elems.length;
        $(elems).each(function(i){
            //Rezise image
            loadImg(this, function callback(){

            //Run masonry afte last image
            if (i = count-1){
                $('#content').imagesLoaded(function(){
                    $('#content').masonry({
                        itemSelector : '.post',
                        gutterWidth: 15,
                        columnWidth: 320
                    });
                });
            };



            });
        })
    },5000);

    //getImgSize('http://25.media.tumblr.com/83c73059a904b46afba332f26e33c5bd/tumblr_mmvwy7XjKq1sqsf7io1_500h.jpg')

    function getUrl(styling){
        styling = styling.replace('url(','').replace(')','');
        return (styling);
    }

    function loadImg (mythis, callback) {
        var src = getUrl($(mythis).css('background-image'));


        var t = new Image();
        t.src = src;

        console.log(t.height);

        var height = t.height;
        var width = t.width;
        if(width &gt; height){
            $(mythis).parent().addClass('panorama');    
            $(mythis).parent().parent().removeClass('smallpost');                    

    }

    callback();


    }

});
</code></pre>
