Script working only on page reload

Question

I'm using jQuery to align images on an horizontal view website, but the script only works when I reload the page.

http://joliannelm.steveforest.com/edition/roux-de-service.html

The script is called just before

This is the script :

$(document).ready(function() {

    var width = 0;

    $('#page img').each(function() {
        width += $(this).outerWidth(true);
    });

    $('#page').css('width', width + 50);

});

Once the page is reloaded it's OK, but if you clear the cache, it's back...

Someone knows why?? Thanks.

Answer 1

This is probably a timing problem: The ready event is fired when the DOM is ready - this can be before the images are loaded. Because you're not giving the images fixed width attributes, you need them to be loaded before you can tell their width.

This is where the load event is the most appropriate trigger.

$(window).load(function() {  ... your code here

unlike ready, load will wait for all associated files - images, style sheets, JavaScript files etc.