Lazy image load with BttrLazyLoading jQuery plugin

The BttrLazyLoading is a jQuery plugin that loads images that are within the viewport. This delays the loading of images on long web pages.

It allows defining images for 4 different screen sizes ( mobile, tablet, desktop, and large desktop ). It has various options for customization.

In this tutorial, I show how you can use the BttrLazyLoading jQuery plugin to implement lazy image loading on your website.

---

Contents

1. Download & include
2. HTML
3. jQuery
4. Demo 1
5. Several Images
6. Demo 2
7. Customize
8. Conclusion

---

1. Download & include

• You can download this library from GitHub.
• Include BttrLazyLoading CSS and Script with the jQuery library.

<!-- CSS -->
<link href="BttrLazyLoading-develop/dist/bttrlazyloading.min.css" type='text/css' rel='stylesheet' />

<!-- Script -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="BttrLazyLoading-develop/dist/jquery.bttrlazyloading.min.js"></script>

---

2. HTML

While adding image elements add class = "bttrlazyloading" and define the image source in data-bttrlazyloading-sm-src attribute.

It will look like this.

<img class="bttrlazyloading" data-bttrlazyloading-sm-src='images/image1.jpg' >

Completed Code

<style>
 img{
  display: inline-block;
 }
 .container div{
  width: 300px;
  display: inline-block;
 }
 .container div img{
  width: 100%;
  height: 100%;
 }
</style>

<div class='container'>
 <div>
  <img class="bttrlazyloading" data-bttrlazyloading-sm-src='images/image1.jpg' >
 </div>
 <div>
  <img class="bttrlazyloading" data-bttrlazyloading-sm-src='images/image2.jpg' >
 </div>
 <div>
  <img class="bttrlazyloading" data-bttrlazyloading-sm-src='images/image3.jpg'>
 </div>
 <div>
  <img class="bttrlazyloading" data-bttrlazyloading-sm-src='images/image4.jpg'>
 </div>
 <div>
  <img class="bttrlazyloading" data-bttrlazyloading-sm-src='images/image1.jpg' >
 </div>
 <div>
  <img class="bttrlazyloading" data-bttrlazyloading-sm-src='images/image2.jpg' >
 </div>
 <div>
  <img class="bttrlazyloading" data-bttrlazyloading-sm-src='images/image3.jpg'>
 </div>
 <div>
  <img class="bttrlazyloading" data-bttrlazyloading-sm-src='images/image4.jpg'>
 </div>
</div>

---

3. jQuery

Call bttrlazyloading() method on a selector.

I call it on .bttrlazyloading class and within the method defining delay option.

NOTE – Here, I use delay option add some delay before the image visible on the screen. You can call the method without it.

$('.bttrlazyloading').bttrlazyloading();

Completed Code

$(function() {
 
 $('.bttrlazyloading').bttrlazyloading( {delay: 1000} );
});

---

4. Demo 1

Scroll the page. Open in a new tab.

---

5. Several Images

This plugin allows defining images according to different-different screen sizes.

• xs – Image Object for Mobile
• sm – Image Object for Tablet
• md – Image Object for Desktop
• lg – Image Object for Large Desktop

There are two ways to define images –

1. Define the image source while creating the element and call bttrlazyloading()
2. Create the image element and initialize source from bttrlazyloading().

1.  HTML

<img  class="bttrlazyloading"
 data-bttrlazyloading-xs-src="images/image1.jpg"
 data-bttrlazyloading-sm-src="images/image2.jpg"
 data-bttrlazyloading-md-src="images/image3.jpg"
 data-bttrlazyloading-lg-src="images/image4.jpg"
/>

JavaScript

$(function() {
 $('.bttrlazyloading').bttrlazyloading( {delay: 1000} );
});

2. HTML

<img class="bttrlazyloading" />

JavaScript

$('.bttrlazyloading').bttrlazyloading({
 xs: {
  src: 'images/image1.jpg'
 },
 sm: {
  src: 'images/image2.jpg'
 },
 md: {
  src: 'images/image3.jpg'
 },
 lg: {
  src: 'images/image4.jpg'
 }
});

---

6. Demo 2

The Images will change according to screen size. Open in a new tab and resize the window.

 

---

7. Customize

Here, are few options that you can use for customization –

• delay – The delay during the image visible on the screen. The Default value is 0.

Example – Here, I set a delay value to 4000 (4 seconds).

$( '.bttrlazyloading' ).bttrlazyloading( { delay: 4000 } );

• placeholder – With this option you can change the default loading image. Default is

Example

$( '.bttrlazyloading' ).bttrlazyloading({ placeholder: 'images/loader.gif' });

• triggermanually – It takes a boolean value. If this set to true then the plugin wouldn’t load images. The default value is false.

Example

$( '.bttrlazyloading' ).bttrlazyloading({triggermanually : true });

Force loading of images

$( '.bttrlazyloading' ).trigger('bttrlazyloading.load');

• destroy() – This function removes the custom classes and events from the image element.

Example

$( '.bttrlazyloading' ).bttrlazyloading( 'destroy' );

Destroy and remove the element

$( '.bttrlazyloading' ).bttrlazyloading( 'destroy' ).remove();

---

8. Conclusion

It is designed to boosts performance delaying the loading of images in long web pages because this wouldn’t load images that are not in the viewport.

If you found this tutorial helpful then don't forget to share.