Using document.ready vs window.load to load deferred content

Question

Using document.ready vs window.load to load deferred content

1.4k views Asked by Salman A At 23 November 2024 at 23:03

I know the difference between document.ready and window.load events. Now in order to improve the performance of my website, I plan to defer loading of javascript. I've seen numerous examples of lazy-loading content:

Inject <script src="..."> and <link rel="stylesheet" href="..."> on document.ready
Inject <script src="..."> and <link rel="stylesheet" href="..."> on window.load
Inject <script src="..."> and <link rel="stylesheet" href="..."> few seconds after document.ready is fired
Inject <script src="..."> and <link rel="stylesheet" href="..."> few seconds after window.load is fired

My first question is which of these methods is preferable.

My second question is that that I want to know what exactly happens when I use approach #1. If my document has this content defined in HTML source:

<!-- head -->
<link>
<script>
<!-- body -->

and in document.ready I inject these additional tags:

<!-- head -->
<link>
<script>
<link class="lazyload">
<script class="lazyload">
<!-- body -->
<img><img><img><img><img>

I am wondering what exactly will the browser do:

When exactly will it fire the document.ready event
In what order will it download the files
Will it block the page while attempting to download the injected files

Original Q&A

There are 2 answers

Niet the Dark Absol On 30 October 2011 at 13:37

The way I do things is to load scripts wherever, mostly in the <head>, then keep a queue-like array of functions to be run, then just before the </body> I iterate through those scripts and run them. I could put all the scripts at the end of the <body> if I chose to, but I find it easier to put the <script> tags next to where they are relevant - much easier for finding them again.

If this is not to your liking, you can set the async and defer attributes of the <script> tag. This means download and execution of the scripts will wait until resources are available (such as bandwidth from the page finishing its download).

If you require images and other content to be loaded before a particular code is run, use window.load. Otherwise, document.ready is fine.

**pmaruszczyk** · Accepted Answer · 2011-10-30 11:58:41

pmaruszczyk On 30 October 2011 at 11:58 BEST ANSWER

This may be helpfull: Loading Scripts Without Blocking, but it answer only few questions.

TechQA.

Using document.ready vs window.load to load deferred content

There are 2 answers

Related Questions in JAVASCRIPT

Related Questions in LAZY-LOADING

Related Questions in DOCUMENT-READY

Related Questions in WINDOW-LOAD

Popular Questions

Popular Tags

Trending Questions