How to Preload only few images in Django

Question

I am Building a BlogApp and I want my Image Page to load only few images after open the Image.

What i am trying to do:-

I am trying to Load only 9 images in the Server. I mean :- When user opens the Page then, load only few images that are in front of the page, and if user scrolls then load next few images.

What is happening Now:-

When i open the server now, It loads all the Images that are uploaded in the Page. AND i don't want to load all the Images in the Page.

What have i tried:-

• I also tried Preload function in HTML BUT it didn't worked for me.

    <img preload="auto">
        <src="{{ image.file.url }}" width="200">
    </img>
  

I don't know what to do.

Any help would be appreciated.

Thank You in Advance.

Answer 1

Basically you want to lazily load images. You can set loading="lazy" to do that.

<img src="{{ image.file.url }}" width="200" loading="lazy">

This will cause the browser to wait until user scrolls near the image to load it.

Reference: Lazy loading