How to Add Lazy Loading Animations For Images?

In Optimole, lazy loading is a key feature that delays loading content until necessary, boosting page speed. This guide shows how to create personalized animations for lazy loaded images. The main idea is that initially, the code will remove images' default blur filters ( opacity: 0). As they are lazy loaded, they will become fully visible with a fade-in transition for a smoother loading experience (opacity: 1).

1

Copy the below code snippet.

/* PART 1 - Before Lazy Load */
img[data-opt-src]:not([data-opt-lazy-loaded]) {
    opacity: 0;
    will-change: opacity; 

	/* Optionally remove blur filter */
	-moz-filter: none;
   	 -o-filter: none;
   	 -ms-filter: none;
    	filter: none;
}


/* PART 2 - Upon Lazy Load */
img[data-opt-lazy-loaded] {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    transition: all 1s ease;
    opacity: 1;
}

2

Use a Custom CSS plugin to paste the code. In this example, we have used the Simple Custom CSS plugin.

📝Note: You can adjust the transition values to suit your needs.

💡Result

Default animation

Fade-in animation