https://github.com/imranhsayed/lazy-load

🌈 A WordPress theme to demonstrate lazy load feature
https://github.com/imranhsayed/lazy-load

Last synced: about 2 months ago
JSON representation

🌈 A WordPress theme to demonstrate lazy load feature

• Host: GitHub
• URL: https://github.com/imranhsayed/lazy-load
• Owner: imranhsayed
• License: gpl-2.0
• Created: 2019-11-19T15:32:26.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2019-11-20T03:54:02.000Z (over 5 years ago)
• Last Synced: 2024-12-28T09:04:12.068Z (5 months ago)
• Language: PHP
• Size: 40.8 MB
• Stars: 7
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
## Lazy Load

WordPress theme to demonstrate lazy load

## Demo

![](lazy-load.gif)

## The Concept

We first add the lightweight image URL in the src and srset attributes, and the actual image URL and actual srcset into data-src and data-srcset respectively.

On initial page load, on window resize, scroll and change in orientation we call the lazyload() with debounce.

The lazy load function loops through each image on the page and checks if its in the viewport .

If it is in the viewport, takes the original image URLs from the data-src and data-srcset attributes and replace the lightweight image with the original one, so we get a blur effect.

We will also add a image container with off-white background and a proper set height( using padding in % ) so it shows when while the images are being loaded.

******* PLEASE STAR MY REPO TO SUPPORT ME ******

Please follow 🙏

Twitter - [@imranhsayed](https://twitter.com/imranhsayed)

Github - [imranhsayed](https://github.com/imranhsayed)

## Demo 2

![](lazy-load-2.gif)