Progressively Lets You Lazy Load Images With Vanilla JS

Every modern website needs to be fast. Though there are many techniques and plugins to increase page speed, still, you may not know where to start.

The Progressively script is a great resource for increasing page speed. It works as a lazy loading image script that loads pictures progressively as the user scrolls down the page.

It’s a free open source project so you can download this and run it on any website. Plus it runs on 100% vanilla JS so it’s got zero dependencies that may weigh you down.

progressively webapp script

You can take a look at the live demo on the Progressively homepage.

It’s a little different than other lazy load scripts because it keeps fixed image sizes for the whole page. This prevents the ever-so-annoying page jump you see whenever images quickly load into view and increase the content height.

And the image placeholders actually look like the images you’re loading. Awesome!

This neat technique gives visitors a chance to preview what the images look like before they load. It’s all handled through JavaScript which checks the user’s location on the page and pre-loads images as they come into view.

Progressively does have a fairly extensive API so it’s a great choice for web developers. The setup can get technical so it helps if you know your way around basic frontend coding.

But you can learn more on the main GitHub page which includes the full API documentation, setup instructions and sample code snippets you can copy/paste for your projects.

progressively lazyload example

If you need a trustworthy lazy-loading image script without the nasty dependencies then give Progressively a shot. It’s totally free and offers a lot of customization for developers.

Also take a peek at the Progressively GitHub to learn more and to nab the downloadable source code.

Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail