Lazy loading is a web development technique that loads images on a page to a later point when the images are actually needed, instead of loading them up front. This techniques helps in improving website performance, reducing loading time and utilization of costs.
There are many benefits for adding Lazy loading in the websites.
1. Lazy loading loads page faster than normal loading, and only loads content when user needed.
2. It helps in reducing resource waste. For example, if an entire photo gallery is loaded on webpage but the user only wants to view first image, then the rest images are wasted in momory.
3. In Lazy loading, content only loads when user scrolls down to the page, so it will provide smooth scroll and better user experience.
There are many open source library available to implement Lazy loading. blazy.js is easy and light-weight Lazy loading library. There is also jQuery Lazy plugin available. We will discuss that plugin in other article. For now, we will implement blazy.js plugin.
blazy is written in pure JavaScript, so you don't have to include 3rd-party libraries such as jQuery. bLazy works on all modern browsers.
You can use blazy in just 3 simple step.
1. Download the blazy from GitHub and add to your website.
<script src="blazy.js"></script>
Or alternativaly use CDN file.
<script src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>
2. Add 'b-lazy' class to img tag. Add real image source to data-src.
<img class="b-lazy" data-src="/path/to/image.jpg" />
3. Write below Javascript to load images Lazy way.
<script type="text/javascript">
// Initialize
var bLazy = new Blazy({
// Options
});
</script>
You can also add few options with bLazy.
You can change the selector if you don’t want to add the ‘b-lazy’ class or if you need to have multiple.
// example
var bLazy = new Blazy({
selector: 'img' // all images
});
The offset controls how early you want the elements to be loaded before they’re visible. Default is 100, so 100px before an element is visible it’ll start loading.
// Example
var bLazy = new Blazy({
offset: 100 // Loads images 100px before they're visible
});
You can also lazy load images inside a scrolling container, just define the selector of the container:
var bLazy = new Blazy({
container: '#scrolling-container' // Default is window
});
If you need to do anything when an image has loaded or fails you can pass a callback function:
var bLazy = new Blazy({
success: function(res) {
// image has loaded
},
error: function(ele, msg){
if(msg === 'missing') {
// data-src is missing
}
else if(msg === 'invalid') {
// data-src is invalid
}
}
});
You can also use more options here.
Loading content is important part in view of user’s browsing experience. Dynamically loading content gives user smooth experience. Lazy loading will provide smooth and easy touch to load website faster and ultimately gives better user experience.
Hi, My name is Harsukh Makwana. i have been work with many programming language like php, python, javascript, node, react, anguler, etc.. since last 5 year. if you have any issue or want me hire then contact me on [email protected]
How to show and hide div elements based on the click of checkboxes in jQuery
Use the jQuery toggle() method The fo...Laravel 5.5 - Google reCaptcha Code With Validation Example
Today, we are share with you in this art...Angular 12 HTTP get request example using HttpClient module
Every front-end application needs to com...How to customize file input type box using CSS and jQuery
Use the CSS Opacity and Positioning meth...How to secure phpMyAdmin
phpMyAdmin is free and open-source web a...