How do images load when scrolling?

Question

How can I achieve an effect when images are loaded only after scrolling to this content. Thus, if you have a large page and there are images at the bottom of the page, they will never load unless you go to that content. If you still do not understand, please see imdb:

http://www.imdb.com/title/tt1385826/

Download the page, and then select the Cast section. You see, only when you view the browser, it makes a request for images and loads. Do I have to write any special code for this to happen for every image on my page?

Thanks in advance:)

Answer 1

I think you need to use javascript; When you move the web browser, you can calculate when the image appears. At this time, you can change the path to the placeholder image to the correct image.

Here is a page with some explanations: they use this jQuery Plugin

Answer 2

There is a jQuery plugin called LazyLoad, it looks like the original author stopped the development, but there are several GitHub download requests that look like they are fixing problems that the author referred to as problems.

http://www.appelsiini.net/projects/lazyload

https://github.com/tuupola/jquery_lazyload/pulls

Answer 3

Instead of loading all the images at once, you write your code in such a way that you only load as much as the page can show (say 20). Then, when scrolling (when reaching the bottom of the page), you can make an ajax call to load the next 20 images and add them to an existing html page.