This solution offers a clever way to lazy load content by targeting specific elements using a class. Simply add the "appear" class to any element you want to lazily load.
Appearlazy leverages appear.js to lazy load images or divs with the "appear" class, dynamically switching data-src attributes to src as the image becomes visible on the page.
Check out an example of this in action at this link.
While appear.js is a popular choice for lazy loading, there are other options available as well.
Explore different JS scripts for lazy loading here, with lazyload.js being one commonly used script - see more at this link.
For Example:
Consider using the jQuery LazyLoad Any plugin for lazy loading a div.
Find it here: https://github.com/emn178/jquery-lazyload-any
To implement, simply add a class like my-lazyload (or your choice) to the div you wish to lazy load.
HTML:
<div id="my-lazyload">
<!--
<p>Your content here</p>
-->
</div>
In your jQuery code, select the class and initiate the lazyload function.
JavaScript:
$`('#my-lazyload').lazyload(options);`
Hopefully, this explanation proves helpful. For further details, refer to the original source page.
Remember to include links to both jQuery and Lazyload js files:
<script src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.lazyload-any.js"></script>
No special CSS is required for lazyloading, just link to your existing CSS styles.