DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
mixbo
mixbo

Posted on

What difference window.ready with document.ready

Alt Text

JQuery are basically used in project, aways defined events callback like $(document).on('ready', function(){}) when document reday. but there has one things Interest me, what is different window.onload with document.ready ?

window.onload

This event must wait for all elements on the page to loaded then execute this function after rendering

document.ready

This event be executed as soon as the dom is loaded ignore other Asset(images,videos) if ready

Also confuse? let's talk a simple example

Simple example

We create new chrome tab with url request page, this page havs many images.

When the page DOM are loaded but images, window.ready won't be trigger until images loaded browser will trigger this callback

As long as page DOM is loaded even if image is not loaded browser will trigger document.ready

One words

window.ready : trigger when page all DOM and Asset(images, videos) are rendered ready

document.ready trigger when page loaded render process rendered even if Asset(images, videos) not ready

Hope it can help you :)

Latest comments (2)

Collapse
 
victormagarlamov profile image
Victor Magarlamov

good drawing )

Collapse
 
ihavecoke profile image
mixbo Author

keep learning every day :)

Update Your DEV Experience Level:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›