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

Extra code snippets:

Fade-in with No Placeholder:

/* PART 0 - Setting Up */
img[data-opt-src] {
  transition: all .25s ease;
  background-color: #f7f7f7; /*placeholder opacity needs to be set to 0 in the optimole's settings for this to be visible*/
  will-change: opacity; /*helps with render speed*/
}
	
/* PART 1 - Before Lazy Load */	
img[data-opt-src]:not([data-opt-lazy-loaded]) { 
  filter: none !important;  
  opacity: 0 !important;
}

/* PART 2 - Upon Lazy Load */
img/*[data-opt-src]*/[data-opt-lazy-loaded]/*[src^=http]*/ {
  opacity: 1 !important;
}

Fade-in with placeholder:

/* PART 0 - Setting Up */
img[data-opt-src] {
  background-color: #f7f7f7; /*placeholder opacity needs to be set to 0 in the optimole's settings for this to be visible*/
  will-change: opacity;
}
	
/* PART 1 - Before Lazy Load */	
img[data-opt-src]:not([data-opt-lazy-loaded]) {
  filter: none !important;
  opacity: 1 !important;
}

/* PART 2 - Upon Lazy Load */
img[data-opt-lazy-loaded] {
  animation-name: fade-in;
  animation-direction: normal;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}

	
@keyframes fade-in {
  0% {
    opacity: 0;
  }
	
  50% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

📝 Note: On lower internet speeds, the fade-in animation will trigger before the bigger image loads, causing the background color to fade in, then the image appears without animation. This animation will fade in the image smoothly on higher internet speeds.