There is a fundamental difference there. That is is when the DOM is ready, which is usually ideal. This is when the whole page has finished loading, which is different. For example, this will wait for images to be finished loading, so that you can measure their widths and heights accurately while your snippet will not wait. Small but sometimes crucial difference.

I’m trying to load page before load the map ( I use is map extreme ) although I use document ready function, the page trying to load mapLabels with page objects. for a while user see my page as there is no css. After the map finished it’s job the css loaded. How can I fix this? I use your code but it didn’t work for me.

Hi all,
I’m battering my head about how I can A: Tell a javascript to wait till the entire site has loaded. I guess I just found the solution to that. And B: Have the javascript load only on the home page.

The site runs on joomla and before I had the script run from a custom html module which I had assigned to the debug position and set to only load on the home page.

That worked fine for firefox, chrome and safari but IE was mocking up (as usual).

Now I’m battering my head about how I can add it so that the script (a lady walking into the site and welcoming the visitors) will only show on the home page.

Should work fine on IE9. At least it is for me. Doesn’t work on IE8 and below though.

What it doesn’t work on however if the current version of Firefox. Apparently firefox treats .load and .ready as the same and loads .load after the javascript has loaded and doesn’t wait for all images and other page content like the other browsers do. Does anyone know of a workaround for firefox?

Great… jQuery again. Looking at the title in Google, I thought you were going to present something non-framework. Bah, why do people ignore the fact that it’s not cool to load a 32KB jQuery lib for something that could be done in a few lines.

$(window).bind(“load”, function(){
});
The above function works fine only on the initial load. But when we navigate to differect page and come back to the same page. the function gets executed before complete loading of Dom elements. Kindly tell me if there is another way

Are you using jquerymobile? Check if the responses to your buttons / links is being added to the same DOM. Use firefox or firebug to determine this. If yes, then it is because in jquerymobile the mode is default ajax. You will need to use ‘rel=”external”‘ in your links to make it work right or re-write the code to get it to work properly within the framework.

$(window).bind(“load”, function(){
});
The above function works fine only on the initial load. But when we navigate to differect page and come back to the same page. the function gets executed before complete loading of Dom elements. Kindly tell me if there is another way ?

Thank you. You always have great web design suggestions. It kinda seems like everyone else out there is saying to use .live() which(according to my research) is depreciated. Even if its not, this rocks! Thanks!

Interesting thanks BUT how can I make a YouTube embedded video wait until the scripts have loaded on a page?
At the moment if the impatient click an image and launch the Lightbox it does not show the zoomed image as it should, rather it just shows the zoom as a seperate page; this diesn’t happen after the video is loaded so it’s obviously the video loading which is stopping the lightbox script from loading.
???

Thanks you so much,
I was having a hard time with columns height because of images not being loaded before jquery.ready was run. Only on refresh, on chrome. But a pain to figure out.
When I put an alert, I could see the images where not loaded when the alert triggered. So I search for the reason and this so “small but sometimes crucial difference” made it work.
Thanks

Awesome and very useful trick. I was trying some jquery at page in the end but its not working, then I found this trick and hola it works perfect. Now I can load my code after whole page loads. Thanks Chris for sharing

thanks. i was having trouble running a script on page load that required the entire page to be loaded including binding of data and application of scripts that changed DOM on the .ready event. once i moved the code out of .ready and into this, it worked.

Thanks much – this helped me out a lot. I was having trouble with loading in code from another central HTML file and then updating it. In this case it was the bootstrap navbar I wanted to change the active class on.

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.