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 Solution to the error “Visual Studio Code can’t be opened because Apple cannot check it for malicious software” #5 How to uninstall Cocoapods from the Mac OS? #6 PHP Login System using PDO Part 1: Create User Registration Page

Recently Posted

#Apr 8 JSON.stringify() in JavaScript #Apr 7 Middleware in NextJS #Jan 17 4 advanced ways to search Colleague #Jan 16 Colleague UI Basics: The Search Area #Jan 16 Colleague UI Basics: The Context Area #Jan 16 Colleague UI Basics: Accessing the user interface
You might also like these
How to display a student’s individual transcript in Colleague?ColleagueHow to get the full URL of current page in PHP?PHPHow to zoom an image inside a box on hover?CSSHow to use a Subquery to Insert Multiple Rows in SQL Table?SQL/MySQLPHP __construct() functionPHPCSS Attribute SelectorsCSSHow to control file extensions with an .htaccess file?MiscellaneousSanitize inputs using built-in WordPress functionsWordPressWhy does MOV matter in IT or any kind of projects?MiscellaneousSQL ALL OperatorSQL/MySQLHow to change style of nth-child using jQuery?jQueryExplanation of PostgreSQL PgAdmin interfacePostgres