Hello Guys. Today i am going to tell you how to use lazy loading in your website using JQuery. What is Lazy Loading ? Lazy Loading is a concept in which we load content of the website as per the requirement or use. On load of our website, what we generally do is that we load all the content from database, render all data on UI, create all HTML DOMs even if that is not visible to user. This is ok for small website, but it we are going with heavy data websites like eCommerce where we have lots of data to show then we use lazy loading.
In Lazy loading, what we do is we load only that content which is visible on screen at a particular time. And other data rendered when we go to that section maybe by scrolling or maybe using some tabs. This increase the speed and performance of website. I used this concept in my organization while developing web pages in Salesforce.
Here i am sharing a small example of using lazy loading using JQuery plugin in HTML. There are hundred of ways to do, will share other in other posts.
Code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="https://emn178.github.io/jquery-lazyload-any/src/jquery.lazyload-any.js"></script>
</head>
<body>
<script type="text/javascript">
$(window).load(function(){
$('.lazyload').lazyload();
});
</script>
<h1 style="text-align:center;">Lazy Loading Demo by Er.Tarandeep</h1>
<div class="lazyload">
<!-- <h2 class="header-md">Record 1</h2>
<div>
Hello everyone. Recently i came across one requirement where we need to have Auto Complete functionality in Visualforce Page so i used apex:inputText component with list attribute and that renders the List of Objects as dropdown as well as Auto Complete. But due to some limitations with apex:inputText and i planned to use JQuery's Autocomplete functionality and thats works great with Salesforce. So i though of sharing that implementation with you guys.
For AutoComplete functionality i have created one AutoComplete Component that we can use in any VisualForce Page and we can easily read data from AutoComplete component in our VisualForce page using JavaScript. In AutoComplete component i have created VisualForce Component and VisualForce Controller. In VisualForce Component i have used JQuery CSS & JS Files that i have upload in Static Resource.
</div> -->
</div>
<div class="lazyload">
<!-- <h2 class="header-md">Record 2</h2>
<div>
Hello everyone. Recently i came across one requirement where we need to have Auto Complete functionality in Visualforce Page so i used apex:inputText component with list attribute and that renders the List of Objects as dropdown as well as Auto Complete. But due to some limitations with apex:inputText and i planned to use JQuery's Autocomplete functionality and thats works great with Salesforce. So i though of sharing that implementation with you guys.
For AutoComplete functionality i have created one AutoComplete Component that we can use in any VisualForce Page and we can easily read data from AutoComplete component in our VisualForce page using JavaScript. In AutoComplete component i have created VisualForce Component and VisualForce Controller. In VisualForce Component i have used JQuery CSS & JS Files that i have upload in Static Resource.
</div> -->
</div>
<div class="lazyload">
<!-- <h2 class="header-md">Record 3</h2>
<div>
Hello everyone. Recently i came across one requirement where we need to have Auto Complete functionality in Visualforce Page so i used apex:inputText component with list attribute and that renders the List of Objects as dropdown as well as Auto Complete. But due to some limitations with apex:inputText and i planned to use JQuery's Autocomplete functionality and thats works great with Salesforce. So i though of sharing that implementation with you guys.
For AutoComplete functionality i have created one AutoComplete Component that we can use in any VisualForce Page and we can easily read data from AutoComplete component in our VisualForce page using JavaScript. In AutoComplete component i have created VisualForce Component and VisualForce Controller. In VisualForce Component i have used JQuery CSS & JS Files that i have upload in Static Resource.
</div> -->
</div>
<div class="lazyload">
<!-- <h2 class="header-md">Record 4</h2>
<div>
Hello everyone. Recently i came across one requirement where we need to have Auto Complete functionality in Visualforce Page so i used apex:inputText component with list attribute and that renders the List of Objects as dropdown as well as Auto Complete. But due to some limitations with apex:inputText and i planned to use JQuery's Autocomplete functionality and thats works great with Salesforce. So i though of sharing that implementation with you guys.
For AutoComplete functionality i have created one AutoComplete Component that we can use in any VisualForce Page and we can easily read data from AutoComplete component in our VisualForce page using JavaScript. In AutoComplete component i have created VisualForce Component and VisualForce Controller. In VisualForce Component i have used JQuery CSS & JS Files that i have upload in Static Resource.
</div> -->
</div>
<div class="lazyload">
<!-- <h2 class="header-md">Record 5</h2>
<div>
Hello everyone. Recently i came across one requirement where we need to have Auto Complete functionality in Visualforce Page so i used apex:inputText component with list attribute and that renders the List of Objects as dropdown as well as Auto Complete. But due to some limitations with apex:inputText and i planned to use JQuery's Autocomplete functionality and thats works great with Salesforce. So i though of sharing that implementation with you guys.
For AutoComplete functionality i have created one AutoComplete Component that we can use in any VisualForce Page and we can easily read data from AutoComplete component in our VisualForce page using JavaScript. In AutoComplete component i have created VisualForce Component and VisualForce Controller. In VisualForce Component i have used JQuery CSS & JS Files that i have upload in Static Resource.
</div> -->
</div>
<div class="lazyload">
<!-- <h2 class="header-md">Record 6</h2>
<div>
Hello everyone. Recently i came across one requirement where we need to have Auto Complete functionality in Visualforce Page so i used apex:inputText component with list attribute and that renders the List of Objects as dropdown as well as Auto Complete. But due to some limitations with apex:inputText and i planned to use JQuery's Autocomplete functionality and thats works great with Salesforce. So i though of sharing that implementation with you guys.
For AutoComplete functionality i have created one AutoComplete Component that we can use in any VisualForce Page and we can easily read data from AutoComplete component in our VisualForce page using JavaScript. In AutoComplete component i have created VisualForce Component and VisualForce Controller. In VisualForce Component i have used JQuery CSS & JS Files that i have upload in Static Resource.
</div> -->
</div>
<div class="lazyload">
<!-- <h2 class="header-md">Record 7</h2>
<div>
Hello everyone. Recently i came across one requirement where we need to have Auto Complete functionality in Visualforce Page so i used apex:inputText component with list attribute and that renders the List of Objects as dropdown as well as Auto Complete. But due to some limitations with apex:inputText and i planned to use JQuery's Autocomplete functionality and thats works great with Salesforce. So i though of sharing that implementation with you guys.
For AutoComplete functionality i have created one AutoComplete Component that we can use in any VisualForce Page and we can easily read data from AutoComplete component in our VisualForce page using JavaScript. In AutoComplete component i have created VisualForce Component and VisualForce Controller. In VisualForce Component i have used JQuery CSS & JS Files that i have upload in Static Resource.
</div> -->
</div>
<div class="lazyload">
<!-- <h2 class="header-md">Record 8</h2>
<div>
Hello everyone. Recently i came across one requirement where we need to have Auto Complete functionality in Visualforce Page so i used apex:inputText component with list attribute and that renders the List of Objects as dropdown as well as Auto Complete. But due to some limitations with apex:inputText and i planned to use JQuery's Autocomplete functionality and thats works great with Salesforce. So i though of sharing that implementation with you guys.
For AutoComplete functionality i have created one AutoComplete Component that we can use in any VisualForce Page and we can easily read data from AutoComplete component in our VisualForce page using JavaScript. In AutoComplete component i have created VisualForce Component and VisualForce Controller. In VisualForce Component i have used JQuery CSS & JS Files that i have upload in Static Resource.
</div> -->
</div>
</body>
</html>
I have used JQuery’s Lazy Loading script that has a function lazyLoad() which is responsible for loading the content when that div comes in visibility. When we create data, we have to comment the code so that it will not be visible on UI and when we use lazyLoad() on parent div, it automatically make the code uncommented and make it visible on UI as soon as that div comes in the screen
Demo :
[iframe src=”https://blog.singhtarandeep.com/lazyloading.html” width=”100%” height=”400″]
Leave a Reply