Pages with 300+ images are not all loading unless refresh page

HTML-CSS
1

Pages with 300+ images are not loading all images unless I refresh the page, they show the alt text instead until refresh then it shows all images.
I am getting complaints from viewers that they can’t see all the images.
As example

The code to display the images is all the same and when I refresh the page it will show all images but I can’t expect people to refresh the page It should work yet I don’t know why it does not work.

Is there any way I can fix this problem?

<div class="grid-container">
	    <div><img src="(c)EuroBikersLifestyleMagazine(1).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(2).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(3).JPG" alt=""></div>  
	    <div><img src="(c)EuroBikersLifestyleMagazine(4).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(5).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(6).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(7).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(8).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(9).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(10).JPG" alt=""></div>
	</div> 
	
	<div class="grid-container">
	    <div><img src="(c)EuroBikersLifestyleMagazine(11).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(12).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(13).JPG" alt=""></div>  
	    <div><img src="(c)EuroBikersLifestyleMagazine(14).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(15).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(16).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(17).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(18).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(19).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(20).JPG" alt=""></div>
	</div>
	
	<div class="grid-container">
	    <div><img src="(c)EuroBikersLifestyleMagazine(21).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(22).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(23).JPG" alt=""></div>  
	    <div><img src="(c)EuroBikersLifestyleMagazine(24).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(25).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(26).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(27).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(28).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(29).JPG" alt=""></div>
	    <div><img src="(c)EuroBikersLifestyleMagazine(30).JPG" alt=""></div>
	</div>

I tried using 1 grid container 500 images long yet it gives the same problems somewhere over 300 images they won’t load until I refresh the page.

2

It might not be a direct fix but perhaps you can try loading the images as the user scrolls. That seems like a heavy load to have all those images load when the user hasn’t even started scrolling yet.

This might help steer you in the right direction: https://css-tricks.com/aos-css-driven-scroll-animation-library/

3

You’ve got 300+ large-ish images (afaics it’s quite a lot more than that), why do you think this will just work? The browser has to download all of those images; it’ll work ok on a very fast connection, but as soon as it isn’t a very fast connection you’ll get this issue.

Ideally don’t have anything like that many images on the same page (paginate them for example). Or you’re going to have to use some JS (for example the scroll idea suggested above)

4

When the website was made in frontpage all images did load correctly yet it was impossible to make the site https instead of a grid layout frontpage used tables could this give this difference as wel?

5

When you made the site, everything was on the same computer. The distance between where the images are stored and where the website code is and where the browser needed to display them is small.

When the site is live, the distance between these things is large - user opens browser, it makes a request across a network for the html, the html has img tags, each one of those causes a request for an image, each of those images needs to be sent back over the network. Those things aren’t in the same place as the user, they take time.

6

If you get a lot of visitors opening that page at the same time, could that flood the server with requests?
100 visitors would be 30,000 requests, right?

7

lazy loading the images did solve the problem thanks to all that replied