0

I want to execute a js code which adds a class to all elements that have specific class eg. .lookbook-block however, I think I'd have to wait until all the HTML has loaded before this loop is executed, but the page had a lot of images so I don't want to use window.load ad that will wait until all images have loaded, which will delay the execution. Is there a way I can wait until only the HTML has loaded?

Thanks!

user1937021
  • 10,151
  • 22
  • 81
  • 143
  • 2
    window.onload = function(){} ? jQuery $(document).ready(function(){}); ? or place the script tag at the bottom of your html body. – rorypicko Jan 13 '16 at 17:31
  • 1
    Possible duplicate of [Official way to ask jQuery wait for all images to load before executing something](http://stackoverflow.com/questions/544993/official-way-to-ask-jquery-wait-for-all-images-to-load-before-executing-somethin), answer talks about document ready vs window onload –  Jan 13 '16 at 17:34
  • @rorypicko actually load will not do the trick here, i was suspicious about this event and in closer look - > https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onload it is far from efficient in this case – Vitaliy Terziev Jan 13 '16 at 17:46
  • You may also want to look at lazy-loading your images in one way or another, so you can mess with the DOM as soon as jQuery's _$(document).ready_ has kicked in, while images are still loading in parallel. – batjko Jan 13 '16 at 18:31

2 Answers2

0

Put script at the bottom of the html

VahagnNikoghosian
  • 613
  • 6
  • 17
0
$(function() {
// Your code here.
});

This adds a callback function to execute when the ready event is triggered from the jQuery library. You can read more about it here. You can do the same thing by using this, which is more clear:

$(document).ready(function() {
  // Your code
});
arjabbar
  • 6,044
  • 4
  • 30
  • 46