HOW TO LOAD DATA AFTER PAGE LOAD
Nowdays you have seen in many sites that some data get loaded after the entire page load. They show a loader image, and when data retrieved from the backend side,area is filled with that data and image get invisble.
Like this image
So here We discuss how we can achieve this technique
You can achieve this with the help of .load() function.
You need to write the below code in your file
HOW TO USE
$( window ).load(function() {
// Run code
});
OR
script>
function load() {
//Your code
}
window.onload = load;
</script>
WHEN TO USE THIS
- While working in the project you come to a situation when there is a huge amount of data need to be displayed on the page. But by default PHP has some limitation when loading the page. You can change the settings but this is hack. Sometime you have no permission to change the config file of the system, then what?So the Solution is use this technique.
- Faster page load
- Page is loaded only once, any all data will be get with the asynchronous request of the .load() function
.LOAD() COMPARED WITH .READY()
.load() function is always get compared with the .ready() function. But they are quiet different in their behaviour
.LOAD()
load is called when all assets are done loading, including images. ready is fired when the DOM is ready for interaction.
The load event fires at the end of the document loading process. They are stored in the stack and when page finished loading, these events get executed one after another. At this point, all of the objects in the document are in the DOM, and all the images and sub-frames have finished loading.
.READY()
$(document).ready(function(){
//code here
});
Save the below code in test.php or test.html
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyTechStopage</title>
<style>
p {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$( document ).ready(function() {
$( "p" ).text( "See the changed text" );
});
</script>
</head>
<body>
<p>Not loaded yet.</p>
</body>
</html>
When control reaches the "p" DOM element this event get fired, it will not wait for the entire page load like .load() function
Some Developers try to achieve more task when somthing is loaded. if you want to know the issues that you can face, then please follow the link:
USEFUL LINKS
Know more about .load() function
Know more about .ready() function
No comments:
Post a Comment