Yogesh Chauhan's Blog

How to progressively load images and add a blurry placeholder?

in CSS & JavaScript on August 2, 2021

Loading images progressively is very important especially when you have tons of images on your web page.

MDN has a really nice guide on Progressive loading.

Example 1: With CSS blur

Here’s a demo I created using MDN code:

Example 2: Without CSS blur

I created another example that doesn’t actually require you to add CSS blur property.

Here’s what I did.

I load the image with smaller height and width first since your browser will just start downloading the image when it sees the src.


<img loading="lazy" 
  src="https://picsum.photos/id/1016/10/10" 
  data-img="https://picsum.photos/id/1016/200/200" 
  width="200" 
  height="200" 
  class="image" 
  alt="Mountain" 
/>


As you can see, I also have another actual larger image in data-img attribute. That actual image will be fetched using JavaScript.

The idea is to change the src for the images and let browser fetch the images.


Here’s the working example:


Most Read

#1 How to check if radio button is checked or not using JavaScript? #2 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #3 How to add Read More Read Less Button using JavaScript? #4 How to uninstall Cocoapods from the Mac OS? #5 PHP Login System using PDO Part 1: Create User Registration Page #6 How to Use SQL MAX() Function with Dates?

Recently Posted

#Aug 15 Is PHP still good for back-end programming? #Aug 10 How to create a multisite network in WordPress? #Aug 3 How to create a circle that follows a cursor using JavaScript and CSS? #Aug 3 How to make a curtain slider using jQuery and CSS? #Aug 2 How to progressively load images and add a blurry placeholder? #Aug 1 How to create a placeholder loader (throbber) using CSS?
You might also like these
Create a galley with overlapping images using CSS gridCSSHow to auto-resize textarea based on text input using JavaScript or jQuery?JavaScriptHow to add AppRoutingModule in Angular application using command line?AngularHow to use @if and @else in SCSS?SCSSIs there a way to do a FULL OUTER JOIN in MySQL?SQL/MySQLSolution to “Call to undefined function mysql_error()” in RevSlider WordPress PluginWordPressHow to set default timezone using PHP?PHPHow to Check If a Variable is an Integer, a Float, a Number, NaN, an Infinite or a Numeric in PHP?PHPHow to merge arrays in JavaScript?JavaScriptWhat’s new in WordPress 5.5?WordPressHow to Use Aggregate Functions (MIN, MAX, SUM, AVG, COUNT) to Summarize Data in SQL?SQL/MySQLAngular: Templates, directives, data binding, Services and dependency injectionAngular