Lazy Load Images on Scroll Using JavaScript | Lazy Loading Gallery

How we can create a lazy load function for images using JavaScript? Solution: See this Lazy Load Images on Scroll Using JavaScript, Lazy Loading Gallery.

Previously I have shared many image related programs, this is lazy loading feature for show elements fast and images later. Basically, Lazy loading is an optimization technique for online content, be it a website or a web app. It loads only the required section and delays the remaining. Like we have 10 images, it will load only those images which are on display area and left others will load on scrolling.

Today you will learn to create JavaScript Lazy Loading Gallery. Basically, there are 20 random images with the same width and height and placed in a column. Each row has only 2 images, which means the column has 10-row sections. First, it will load only the images which are on display right now, then when you scroll down then the others will load.

So, Today I am sharing Lazy Load Images on Scroll Using JavaScript. There I have used HTML and CSS to create the layout design and JavaScript for the lazy loading functions. There I have not used jQuery or any other JS library, you can call it a pure JS program. You can use this program on your website for fast loading. If you use any CMS then use plugins that are available in the market.

If you are thinking now how this lazy load program actually is, then see the preview given below.

Preview of Lazy Loading Gallery

See this video preview to getting an idea of how this gallery and load feature looks like.

Now you can see this program visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.

You May Also Like:

• Custom Range Slider
• Image Comparison Slide
• Scroll Timeline Section
• Grid Masonry Layout

Lazy Load Images on Scroll Using JavaScript Source Code

Before sharing source code, let’s talk about it. First I have created the main div with class name gallery and placed all the images with a div inside it. Each group has a similar class name and I have used random images from a website. Also, in the HTML file, I have linked other files like CSS and JavaScript.

Now using CSS I have placed all the images and heading in the right place, as you can see in the preview. There I have used flex display command to create the layout and used max-width to creating responsive elements. I gave a 1-second delay for image visible, and gave width, height and other values to the elements.

JavaScript handling here the lazy load feature on scroll in this program. I used JS document.querySelectorAll command to fetch and used if{} else{} statement to declare the conditions and commands. There I have created a function to load images on scroll. Left all other things you will understand after getting the codes, I can’t explain all in writing.

For creating this program you have to create 3 files. First file for HTML, second for CSS, and the third file for JavaScript. Follow the steps to creating this program without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes given here.

function.js

The final step, create a JavaScript file named ‘function.js‘ and put the codes.

That’s It. Now you have successfully created Lazy Load Images on Scroll Using JavaScript, Lazy Loading Gallery. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.