ovokuro ovokuro - 3 months ago 21
CSS Question

How can I delay JavaScript from executing?

I'm new to JavaScript and pulling my hair out over this...

A demo of the problem is here: http://codepen.io/sol_b/pen/PzgdWy

And this is the script:

var sections = function() {
$('.image').each(function() {
var $this = $(this),
x = $this.find('img').width()
$this.width(x);
});
};

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

$(window).resize(function() {
sections();
})


The width of an image is calculated and assigned to the image's container. The idea is that the row of images will always maintain their aspect ratio, without gaps between the containers.

The problem is the code fails about 50% of the time and the images just squish together. Resizing the window fixes it so I think it's something to do with the loading sequence.

I've tried using window.onload and img.onload instead of document.ready, and these didn't solve it. Have I missed something in my script?

Answer

Use instead:

$(window).on('load resize', sections);