DEV Community 👩‍💻👨‍💻

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 :)

Oldest comments (2)

Collapse
 
victormagarlamov profile image
Victor Magarlamov

good drawing )

Collapse
 
ihavecoke profile image
mixbo Author

keep learning every day :)

Classic DEV Post from 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!