The server forms the page and sends it to the browser when a visitor arrives at the site. The combined logic of all pages on the site determines the functionality of the web resource and the interest of visitors to it.
Using JavaScript and onload events dramatically changes the functioning of the site. If you assign a handler at the time the bootstrap finishes, you can determine where exactly, how, and what should be started.
Page Main Event
The end of page loading is fixed by the onload event, which is assigned to the body tag. The onset of this event is preceded by the loading of all style files, scripts, images and other resources. The page element tree (DOM) is built, but may not be displayed in a browser window.
In the HTML syntax and in the JavaScript language, onload and body are one. The event of completion of loading occurs as soon as the body of the document with all associated files (resources) is loaded and ready for use.
The example shows how to connect the onload event handler in JavaScript. On the left is the HTML page code. The body tag is assigned a GoPage () handler. On the right, the handler code is a normal browser language function with “unusual” functionality.
A simple example of using onload
The example is simple and revealing. There is no specific logic, and the mechanism for processing the onload event in JavaScript is shown on a popular task - the orientation of page elements in a browser window of a specific size.
The task is simple - the site needs to be loaded so that its elements are located in the correct positions depending on the size of the browser window.
Immediately after the body tag is a description of the required variables that contain the current ones: the height and width of the window, the coordinates of the header, content and footer of the page. Variables are only described, they get real values ​​when processing the onload event in the JavaScript GoPage () function.
The meaning of the example is to get the necessary initial data when loading the page and ensure the scfChange () function is executed. This function is assigned by the handler to the onresize event and is run every time the browser window size changes.
Example result: the onload event in JavaScript causes the initial values ​​to be set, which ensures the correct functioning of scfChange () and starts the call to the InitXML (...) server to take the following actions.
Logic problem using onload event
The visitor comes to the site, the page loads, the onload event fires, and all preparatory actions are performed. The logic of work after working out onload depends on the logic of the site and its functional purpose.
For example, a store’s site, when a visitor arrives at it, can restore the place where that visitor left the site in a previous session. And on the "arrival" of a new visitor to offer him a home page with goods of daily or current demand.
A search engine site can restore the last sample for its client and offer a description of its functionality for a new visitor.
There is no guarantee that the site visitor or new visitor will not choose to refresh the page. And this is also an onload event, and JavaScript functions will have to be able to distinguish between the initial loading of a page and its updating. This is not a big problem in programming, but it can be difficult to form the correct logic for the site as a whole.
Dynamic Site Resources
A matter of time (moment regarding the visitor’s arrival) of loading styles, pictures, scripts is the competence and professionalism of the developer. If, by the logic of the field of application or the spectrum of tasks to be solved, it is required to download all the functionality immediately, no effort is required. When processing the onload event, it remains only to start the logic from some starting point.
Some resources (for example, pictures of goods in the store) are not immediately determined by the assortment (content) and can be dynamically changed. The arrival of the visitor should be accompanied by tracking the point in time: the JavaScript visitor input handler (onload) and image (load) are processes spaced in time.
It is absolutely not necessary to include in the functionality of the input handler everything that “may come in handy." Pictures (image), sounds (sound) and other voluminous resources can always be downloaded at the time of use or provide for the logic of preloading during the dialogue with the visitor.
Lively and dynamic site
It is hard to imagine the creation of a modern dynamic site without the use of JavaScript and onload. Function GoPage () is not just determining the state of the browser and recalculating the coordinates of the page elements (in the example above).
Function GoPage is a call to the server "InitXML (..." to make important decisions and "continue the relationship."
The given example as a solution template for creating a live site has been used for many years to create dynamic network resources that lead the visitor from the moment he arrives to the end of the session.
Returning a visitor to the site is a continuation of the work, and not an option to start a new session. A new session is only for a new visitor.
If we consider onload as a visitor’s arrival, the situation moves from the page event to the “interaction” event between the site visitor (regular customer), in their relationship over time.