Lazy image load with BttrLazyLoading jQuery plugin

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

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

Lazy image load with BttrLazyLoading jQuery plugin


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 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 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 loading of images in long web pages because this wouldn’t load images which are not in the viewport.

In this tutorial, I explained few customization options of this jQuery plugin you can learn more about other options from here.

Related Post

Spread the love

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *