Question

I’m trying to preload image and set the height and width to a container.

The problem seems to be with caching in ie8 since it fails to load on subsequent refreshes.

I’ve looked up and tried multiple solutions but seems nothing is working, at least not consistently.

current Javascript:

    img = new Image();
    img.src = '/images/site/image.jpg';
    img.onload=function(){
        var width = img.width + 'px';
        var height = img.height + 'px';

        $('#container').css({'width':width,
                          'height':height
        });
    };

Any suggestions are appreciated, thanks.

Answer 1

You must set the onload callback before setting the src.

When the image is cached, the onload callback isn’t called with your code as the load event is produced before the callback is set.

Do this :

img = new Image();
img.onload=function(){
    var width = img.width + 'px';
    var height = img.height + 'px';

    $('#container').css({'width':width,
                      'height':height
    });
};
img.src = '/images/site/image.jpg';