CODEWITHSUNDEEP
javascriptjqueryimageloading
Tomarinator
Tomarinator

Reputation: 782

Loading images upon scrolling

Suppose I have a python script that dumps a 1000 images on a webpage, when the user opens the webpage, the browser tries to open all of them at once, which slows down the page.

Is there any way to make sure that only those images are loaded, which lie in the current field of view of the user, to somehow load them depending upon the position of the scroll bar ?

Upvotes: 0

Views: 177

Answers (1)

Yad Smood
Yad Smood

Reputation: 2932

We call this design pattern Lazy Loading. There already lots of plugins achieved it, such as loading images by scrolling. Say Lazy Load Plugin for jQuery:

Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages. Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them. This is opposite of image preloading.

Using Lazy Load on long web pages containing many large images makes the page load faster. Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.

You can go to their web page to checkout the full example and api.

Upvotes: 1

Related Questions