Thursday, June 13, 2024
HomeJavaDistinction between jQuery Doc Prepared Technique and JavaScript Window Onload Occasion

Distinction between jQuery Doc Prepared Technique and JavaScript Window Onload Occasion

Although each jQuery prepared occasion and window onload occasion is used to carry out job when web page is loaded, there’s a delicate distinction between them. jQuery doc.prepared methodology, which isn’t methodology however a jQuery occasion is fired, when DOM is prepared i.e. all components of DOM is obtainable, however not essentially all contents e.g. photographs and video, however, JavaScript built-in window.onload occasion is fired when the HTML doc is totally loaded, together with DOM and all it is content material e.g. photographs, audio and movies.

Due to this purpose, you may even see that scripting code outlined in jQuery $(doc).prepared() executes earlier than code outlined on window.onload occasion, particularly if the loading of photographs takes a very long time.

By the way in which the distinction between JavaScript window onload occasion and jQuery doc.prepared occasion can be one of many fashionable jQuery Interview Questions, requested to each inexperienced persons and skilled net builders. On this article, we’ll discover some key variations between jQuery prepared vs onload and can discover it out when to make use of the jQuery prepared methodology vs window onload occasion.

And, If you wish to study Trendy JavaScript or degree up your abilities then I recommend you be a part of these on-line JavaScript programs. It is top-of-the-line and hands-on sources to study ES 6 and different new Javascript options.

What are window onload and jQuery doc prepared occasion

In JavaScript window is certainly one of core object and defines a number of helpful occasions e.g. onload, earlier than jQuery comes, if need to execute any code, as soon as DOM is loaded fully, we use window.onload occasion. We outline code like

window.onload = operate(){
  // code presupposed to run as soon as DOM is loaded
  alert("onload occasion is fired");

There’s a drawback with this code, it not precisely executed when DOM is loaded however it executes in any case content material together with massive photographs are loaded fully. Browser usually delay executing onload code, till all web page content material is loaded, due to this consumer can see vital delay between they first see the web page and the time that code inside onload get executed, this delay is especially notable, in case your web page content material heavy photographs, flash movies or different heavy content material with low bandwidth web connection. jQuery solves this drawback by introducing prepared occasion, you might need seen code like beneath in a number of JavaScript recordsdata or HTML pages :

    alert("Inside jQuery prepared methodology");

right here $() is a shortcut for jQuery() operate, and we wrap doc object into jQuery object to make use of prepared() methodology. We’re passing an nameless operate to prepared() methodology, which will likely be executed as soon as DOM is loaded. It does not wait until all DOM content material accessible e.g. photographs. By the way in which, as a substitute of utilizing $(doc).prepared() operate, you can even use following short-cut, which has similar impact :

$(operate() {
   alert("shortcut for doc.prepared methodology in jQuery");

Other than quicker execution, one of many key benefit of jQuery prepared methodology over JavaScript window onload occasion is that, you should use them a number of occasions in your web page, in contrast to onload occasion, which may solely be bind to a single operate. Browser will guarantee to execute all doc.prepared code to execute within the order, they’re specified within the HTML web page.

jQuery prepared vs window onload occasion

As I mentioned earlier, most important distinction between them is when jQuery prepared vs onload occasion get triggered, former set off earlier than later. However, earlier than making choice when to make use of doc prepared vs window load, let’s have a look at couple of extra variations between home windows onload occasion vs doc prepared occasion.

1) In contrast to jQuery prepared occasion, which is barely accessible in jQuery library, window.onload is commonplace occasion in JavaScript and accessible in each browser and library.

2) Typically jQuery doc prepared occasion fireplace earlier than window.onload occasion, in worst case, the place there is no such thing as a cumbersome content material to load and there’s no delay from browser facet, window onload occasion get set off at similar time as doc.prepared occasion.

3) One other distinction between doc prepared vs window load is that, by utilizing window’s onload approach, we are able to solely specify one occasion handler, however we are able to use jQuery prepared code a number of occasions in a web page and browser will invoke them within the order they’re declared in web page.

4) jQuery prepared occasion fires as quickly as DOM is loaded i.e. all it is components can be found, it does not look forward to DOM contents e.g. photographs, whereas JavaScript window.onload occasion first when DOM is absolutely loaded together with contents e.g. photographs.

5) Final however not least distinction between jQuery prepared vs doc onload is that former supplies cross browser compatibility, an inherent jQuery benefit, whereas later suffers from browser particular implementation.

When to make use of jQuery prepared over window onload

jQuery document ready vs JavaScript Window onload event

After figuring out these variations between them, it is clear that it is best to use jQuery doc prepared() operate for all sensible goal, the place you need to execute your script code, when DOM is prepared, however not when you must carry out operations on DOM contents e.g. photographs. 

It’s best to use window.onload if you’re coping with photographs, there dimensions or different properties, as a result of they will not be accessible, when jQuery doc prepared occasion get triggered.



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments