Servage Magazine

Information about YOUR hosting company – where we give you a clear picture of what we think and do!

Lazy-loading images to save your bandwidth

Monday, January 23rd, 2017 by Servage

If you are running website with many large images or just a very popular website, you can easily save a significant amount of bandwidth if you use lazy-loading images. Lazy loading means that images are only loaded when they are needed. In most cases this means when you scroll a page down and a new image becomes visible, it will be loaded.

Installing Lazy Load

There are many lazy loader plugins available and most, if not all of them, use JavaScript to handle the lazy loading logic. This time we will use a JavaScript library called Lazy Load from www.appelsiini.net/projects/lazyload. As always when when using external JavaScript libraries, they must be included in the page.

To get the JavaScript file, you should install it using Bower or NPM. This is the recommended way to install the library, but if you are not familiar with either of these package managers, you can also download the .js file from GitHub at www.github.com/tuupola/jquery_lazyload/releases. Place the downloaded .js file at the end of your <body> tag.

Note that Lazy Load depends on jQuery, which means you must include a jquery.js file as well. If you don’t have jQuery yet, you can download it from www.jquery.com. Place the jquery.js file above the Lazy Load JavaScript file so that it will be loaded first. When you have included these two files in your HTML file, Lazy Load is installed and ready for use.

Loading Images Dynamically

Now that Lazy Load is installed, we are ready to apply it to images. To do this, we have to edit all <img> tags we want to load dynamically using Lazy Load. Instead of using the src attribute to specify a path to the image, use the data-original attribute instead, for example: <img class=”lazy” data-original=”img/example.jpg”>. We have also given a class called “lazy” for the image. This can be useful if you want to lazy load all images with the class “lazy” and leave other images unchanged. This is what we will do next.

To load images using the plugin, we have to tell it what images to load. This is why we used the “lazy” class earlier. In the JavaScript plugin there is a function called lazyload() that we can call on the elements we want to enable for lazy loading. You most likely want to do this inside the $(document).ready() function when the page has finished loading. Here is a full example of that: $(document).ready(function() { $(“img.lazy”).lazyload(); }). This will enable lazy loading for all <img> elements with the class “lazy”.

This is all there is to the basic setup. If you want to customize the plugin, such as define how much in advance images should be loaded, check out the website from where you downloaded the plugin.

Lazy-loading images to save your bandwidth, 5.0 out of 5 based on 2 ratings
Categories: Tips & Tricks

Keywords:

You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

No comments yet (leave a comment)

You are welcome to initiate a conversation about this blog entry.

Leave a comment

You must be logged in to post a comment.