Hello everyone,

In this post I am going to show you how to make your websites or blogs load faster by using a JQuery plugin created by Luis Almeida called "Unveil".

The plugin works by postponing the load of the images that are not visible on the browser. These images are loaded when the user scrolls down and this gives a professional look and improves the performance of the website. Also this technique enables some mobile data users to use less data and prevents unnecessary mobile data charges.

First of all let's find the "img" element in our CSS file. It might look like a bit different than mine but it's okay. Then modify it and add the last two statements.

img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
        border: 0;
        opacity: 0;
        transition: opacity .5s ease-in;
      }

Now all the images on our website are invisible and when the opacity is changed by the Plugin, they will have a transition effect.

Alright, the next thing to do is adding the plugin to our website. Find the </body> tag and add the following right before </body>:

....
...
<script type="text/javascript" src="https://yourjavascript.com/16496268113/jquery-unveil.js"></script>
  </body>

Finally we need to add the following script to be able to adapt the plugin to our img tags.

// Created by Berk SOYSAL http://soysal.tk
$(document).ready(function(){
      
  $("img").each(function() {
    $(this).attr("data-src",$(this).attr("src"));
    $(this).removeAttr("src");
  }); 


  $("img").unveil(100, function() {
    $(this).load(function() {
      this.style.opacity = 1;
    });
  });
});

$(window).load(function(){
     $("html,body").trigger("scroll");
});

Warning: Please make sure that the images on your website or their classes have width and height properties. Otherwise your images might not be displayed properly!

That's all! Now you can test the speed of your website and see the improvement yourself. I am not going to provide a demo page since I am also using this plugin on this website so you have already tested the plugin :)

Please leave a comment if you have any questions and don't forget to share this with your friends!
Keywords: HTML JavaScript CSS Code Snippets