How to apply lazy load in archive.php in wordpress?

Please post the URL that demonstrates this behavior, thanks.

It is not in live.So I have attached the screens here. Please look at those and guide me.
Screen-Shot-2017-05-31-at-2.47.23-PM.png
Screen-Shot-2017-05-31-at-2.47.28-PM.png
Screen-Shot-2017-05-31-at-2.47.44-PM.png
Screen-Shot-2017-05-31-at-2.47.49-PM.png

Loading of images is a browser operation - not server - the solution is not PHP.

What are you using to display that page?

It would be a lot easier to help if you could put this online so we can apply traditional tools and observe the behavior.  One obvious issue might be the bandwidth required by the images, but beyond that we're just guessing since we get redirected away when we try to see the URL.
http://www.stockimagesafrica.com/downloads/category/southern-africa/

I uploaded the files to live. Could you please check it now? The url for the page is http://www.stockimagesafrica.com/downloads/category/southern-africa/

But while loading, it is getting mixed up with each other.

This is a nature of the web - files are downloaded asynchronously and as such are ready at different times. They appear mixed up but they are not actually - the effect is created by some files later down the page finishing loading before the ones before it.

First step - I used BuiltWith to see what's in use here.
https://builtwith.com/?http%3a%2f%2fwww.stockimagesafrica.com%2fdownloads%2fcategory%2fsouthern-africa%2f

Then I did "view source" and I see that the images are being loaded via HTML <img> tags.  There seem to be about 70 of them.

Watching the behavior, it looks to me that this is a bit like the Flash of Unstyled Content.  One possible solution might be to get the CSS files loaded first.  Perhaps use a task runner like Grunt to merge the CSS files and put them at the top of the HTML document.  I would also check to be sure that the CSS used to style the images is explicit as possible about the size and location of the image containers.

You can also try optimizing the images for minimum bandwidth.

Not sure if this is applicable, but it might be worth a look.  It appears to me that the srcset attribute is being used wrong.  This example at W3Schools looks more like what you might want.
https://www.w3schools.com/tags/att_source_srcset.asp

srcset appears correct to me - but not relevant to this question as it is used to control which images are downloaded on different sized devices.
Not sure that optimising your CSS is going to make much difference - it is good practice but minimal effect in the context of the 70 images you are downloading

If you look at the network tab in your console you will see this is all about the number of images that are loading.

One option is to put placeholder elements in the images with spinners in them. These are elements styled to be the same size as the images that will eventually go there - you then use JavaScript to load the images binding a load event handler to the images that when triggered removes the placeholder and adds the image.
This won't make your images load faster it will just mean your page doesn't jump around and the visitor can see something is happening in the empty blocks.

A simpler version of this is just to style the container for the image to be a certain size - the images will fill the containers when they are ready and the page won't jump.

Thanks for your quick response. I found out the solution for the problem with your help. It is because of the JS and CSS loading at the same time. So I just fade the particular div for sometime and I am showing it once the content has been loaded on the page fully.

<script type="text/javascript">
   jQuery('#edd_download_image img').each(function(i) {
            jQuery(this).fadeOut(0).delay(1000*i).fadeIn(1850);
   });
</script>

The above snippet solved the problem. Thanks.

Hi All,

I am still getting the same issue. The load more is getting applied in "http://www.stockimagesafrica.com/people/". It is not getting applied only in this page "http://www.stockimagesafrica.com/downloads/category/southern-africa/". I tried writing the script manually in that page.But the issue persists still. Can someone please help me to fix this solution?