Lazy Load delays loading of images in long web pages. Images outside of viewport will not be loaded before user scrolls to them. This is opposite of image preloading. This is a modern vanilla JavaScript version of the original Lazy Load plugin. It uses Intersection Observer API to observe when the image enters the browsers viewport. Original code was inspired by YUI ImageLoader utility by Matt Mlinac. New version loans heavily from a blog post by Dean Hume. By default Lazy Load assumes the URL of the original high resolution image can be found in data-src attribute. You can also include an optional low resolution placeholder in the src attribute. If you prefer you can explicitly pass the image elements to the factory. Use this for example if you use different class name. Low resolution placeholder ie. the “blur up” technique. Lazyloaded Responsive images are supported via data-srcset. If browser does not support srcset and there is no polyfill the image from data-src will be shown.

Features

  • Blur up images
  • Responsive images
  • Inlined placeholder image
  • Reduce the amount of request you can use data uri images as the placeholder
  • You can install beta version with yarn or npm
  • If you use jQuery there is a wrapper which you can use

Project Samples

Project Activity

See All Activity >

Categories

Multimedia

License

MIT License

Follow Lazy Load Remastered

Lazy Load Remastered Web Site

Other Useful Business Software
Earn up to 16% annual interest with Nexo. Icon
Earn up to 16% annual interest with Nexo.

More flexibility. More control.

Generate interest, access liquidity without selling, and execute trades seamlessly. All in one platform. Geographic restrictions, eligibility, and terms apply.
Get started with Nexo.
Rate This Project
Login To Rate This Project

User Reviews

Be the first to post a review of Lazy Load Remastered!

Additional Project Details

Programming Language

JavaScript

Related Categories

JavaScript Multimedia Software

Registered

2021-07-02