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 How to add Read More Read Less Button using JavaScript? #3 Solution to “TypeError: ‘x’ is not iterable” in Angular 9 #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

#Dec 4 What is Etrieve Flow? #Dec 2 The unique operator($) in Envision Basic #Nov 25 Steps to Install Microsoft SQL Server on a MacOS #Nov 11 What is DevOps? #Nov 10 The * arithmetic operator in Envision Basic #Nov 10 What are Big Data Clusters in SQL Server?
You might also like these
Killing A Project Part 1: What criteria should be used to cancel/kill a project?Miscellaneoussubstring() Method in JavaScriptJavaScriptHow to Install PHP Laravel on MacOS Catalina?PHPHow to define variables in SCSS (Sass)?SCSSHow to Use the EXISTS and NOT EXISTS Operator with a Subquery in SQL and MySQL?SQL/MySQLHow to Hide HTML elements automatically after few seconds using JavaScript?HTMLHow to create a vertically rotating texts using CSS?CSSCan Firewall and IDPS Stop DDoS Attack?MiscellaneousHow to check if the element exists using JavaScript and jQuery?JavaScriptHow to draw an SVG path on scroll using JavaScript?JavaScriptHow does Next.js load pages faster?NextJSHow destructuring works in React?React