This tutorial will guide you through the process of implementing Progressive Image Loading in Javascript. This technique enhances user experience by initially displaying a low-resolution or blurred version of an image, which then progressively sharpens as the full-resolution image loads. This approach significantly improves perceived performance, especially on slow network connections, by providing immediate visual feedback and preventing the user from staring at blank spaces while waiting for images to load.
Adding Header Assets
To begin, you’ll need to include the necessary CSS stylesheets in the <head> section of your HTML document. These stylesheets provide the basic styling for the page and the progressive image loading effect.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <link rel='stylesheet' href='https://zafree.github.io/pilpil/dist/css/pilpil.min.css'>
Creating the HTML Structure
Next, you’ll create the HTML structure for displaying the images. This involves setting up a container, rows, and columns for layout, along with the necessary elements for the progressive image loading effect, including thumbnail images, canvases, and full-resolution images.
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<div class="github-star">
<iframe src="https://ghbtns.com/github-btn.html?user=zafree&repo=pilpil&type=star&count=true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
</div>
<h1 class="title"><a href="https://github.com/zafree/pilpil" target="_blank">Pilpil</a> - Progressive Image Loading</h1>
<p>
<a href="https://github.com/zafree/pilpil" target="_blank">Pilpil</a> is a tiny, pure JavaScript library for Progressive Image Loading with a blur effect to reduce the page load time; as seen on <a href="https://medium.com/" target="_blank">Medium</a>.
</p>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<figure class="graf-figure">
<div class="aspectRatioPlaceholder">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia" data-width="3820" data-height="2762">
<img class="progressiveMedia-thumbnail" src="https://cdn-images-1.medium.com/freeze/max/30/1*_ASVxMQ2WFospoTZ22MDnw.jpeg?q=20" />
<canvas class="progressiveMedia-canvas"></canvas>
<img class="progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/2000/1*_ASVxMQ2WFospoTZ22MDnw.jpeg" />
</div>
</div>
</figure>
<figure class="graf-figure">
<div class="aspectRatioPlaceholder">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia" data-width="3937" data-height="2625">
<img class="progressiveMedia-thumbnail" src="https://cdn-images-1.medium.com/freeze/max/30/1*veE0CsrcA2x0NSKF3dzg4g.png?q=20" alt="" />
<canvas class="progressiveMedia-canvas"></canvas>
<img class="progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/2000/1*veE0CsrcA2x0NSKF3dzg4g.png" alt="" />
</div>
</div>
</figure>
<figure class="graf-figure">
<div class="aspectRatioPlaceholder">
<div class="aspectRatioPlaceholder-fill"></div>
<div class="progressiveMedia" data-width="2000" data-height="1661">
<img class="progressiveMedia-thumbnail" src="https://cdn-images-1.medium.com/freeze/max/30/1*yPXod3TNMSRiFK0IeegFng.jpeg?q=20" alt="" />
<canvas class="progressiveMedia-canvas"></canvas>
<img class="progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/2000/1*yPXod3TNMSRiFK0IeegFng.jpeg" alt="" />
</div>
</div>
</figure>
<div class="github-star">
<iframe src="https://ghbtns.com/github-btn.html?user=zafree&repo=pilpil&type=star&count=true" frameborder="0" scrolling="0" width="95px" height="20px"></iframe>
</div>
</div>
</div>
</div>
<script src='https://zafree.github.io/pilpil/dist/js/pilpil.min.js'></script>
Styling with CSS
Now, let’s add some CSS to style the components. This CSS code provides basic styling and layout for the image containers.
.github-star,
.graf-figure {
margin-top: 20px;
margin-bottom: 20px;
}
Include Javascript File
To enable progressive image loading, we will include pilpil.min.js javascript file
Final Thoughts
By following these steps, you’ve successfully implemented Progressive Image Loading in Javascript. This technique can significantly improve the user experience of your website or application by providing faster perceived loading times and a smoother visual experience.
