How can I delay JavaScript from executing?

Question

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?

From the docs: "In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead." — James Thorpe
– James Thorpe, Commented Aug 23, 2016 at 12:22
Documentation states "In cases where code relies on loaded assets (for example, if the dimensions of an image are required), the code should be placed in a handler for the load event instead." — Sohil
– Sohil, Commented Aug 23, 2016 at 12:27
@JuanMendes please remove the duplicate here. This is not the question! It is not about all images. — eisbehr
– eisbehr, Commented Aug 23, 2016 at 12:33
There's an example on how to wait for specific images stackoverflow.com/questions/15134468/… Just be careful that the images may be cached so the load event may have already fired by the time you register a listener — Ruan Mendes
– Ruan Mendes, Commented Aug 23, 2016 at 12:36

eisbehr · Accepted Answer · 2016-08-23 12:41:27Z

3

Use load on the images and count till all are loaded, then execute your function.

var images $('.image');
var amount = images.length;

images.on('load', function() {
    if( --amount == 0 ) {
        sections();
    }
});

To prevent cached images to be executed from the listener, you could trigger them manually (even on window.load). This lines will fire the event for cached elements:

images.each(function() {
    $(this).complete && $(this).trigger('load');
});

edited Aug 23, 2016 at 12:41

answered Aug 23, 2016 at 12:28

eisbehr

12.5k8 gold badges42 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

A. Wolff Over a year ago

That's just overcomplicating it when you could just use the window load event

Ruan Mendes Over a year ago

This is only needed if the images are created dynamically. Note that the load event may not fire if the image is cached. The load event on the window already waits for all images

A. Wolff Over a year ago

@JuanMendes This is only needed if the images are created dynamically What do you mean?

Birjolaxew Over a year ago

@A.Wolff Using the windows load event waits for all resources to load. Using the images own load event makes sure your code is ran when the images load... which is exactly what you want.

Birjolaxew Over a year ago

@A.Wolff Scripts can be loaded async (and should be, unless they require being ran sync), and stylesheets and subframes can take longer to fetch than images (especially if the images are cached).

|

A. Wolff · Accepted Answer · 2016-08-23 12:28:45Z

2

Use instead:

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

answered Aug 23, 2016 at 12:28

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

1 Comment

Motombo Over a year ago

Yes this seems to be the best approach. Surprised I didn't think of this +1

Alan Jurczak · Accepted Answer · 2016-08-23 12:37:20Z

0

Try using 'on load' event handler instead of $(document).ready:

$(window).on('load', function() { 
  sections();
});

instead of:

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

Or you can use:

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

To handle both events :)

edited Aug 23, 2016 at 12:37

answered Aug 23, 2016 at 12:31

Alan Jurczak

4785 silver badges14 bronze badges

Comments

pig__man · Accepted Answer · 2016-08-23 12:25:49Z

-1

I believe what you're looking for is the timeout() function.

If my understanding is correct you can call window.timeout([function to call], [time in ms] and the function to call will execute that many ms AFTER the code is executed. It will not wait like a sleep().

answered Aug 23, 2016 at 12:25

pig__man

72 bronze badges

Comments

Maciej Treder · Accepted Answer · 2016-08-23 12:26:15Z

-1

setTimeout(
    function(){
        console.log("this line will be logged with 1000ms delay");
    },1000
)

W3C documentation

answered Aug 23, 2016 at 12:26

Maciej Treder

12.4k6 gold badges59 silver badges77 bronze badges

Collectives™ on Stack Overflow

How can I delay JavaScript from executing?

5 Answers 5

8 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

8 Comments

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related