Issue with speed/loading images

I do still see 503 errors on my end.

All the images are already set to be lazy loaded. But for some reason, when you scroll down past the first row of images, my browser starts downloading all the images of the page, even those much lower on the page, and some of those requests fail with 503 errors.

I’m usually a fan of letting the browser do the heavy lifting instead of reinventing the wheel with Javascript, but in this case I think some browsers need some help.

Maybe some image gallery component could handle the downloading more efficiently?


I’m not sure because I haven’t tested but
I mean if you use JS to dig in the directory (ajax)
that it will activate the hotlink protection

or it will give you a 403
if you have disabled dir listing

so I have no suggestion…
and then you should also edit the JS code from your owl carousel afterward which is an additional complication.


i did a test when the gallery is split into 4 parts each in a div with display = none style and triggered by scrolling past a point to make the div display to block.
i think it works nice except that it splits the parts with a new line and not like its now.

do you think this would be better
i can maybe make a javascript that appends new php lines with the same scroll trigger?

i will upload the test and give you a link :slight_smile:

btw @Admin what is the limit so maybe i will match just below that limit ?

I don’t know the exact value is the limit, those things tend to be secret and subject to change.

If you could make it so that any image is only loaded once it’s scrolled in to view, that would be best. So basically load the rows of images one by one.


@Admin can you please try this page and let me know if it works better?

i divided the gallery to 5 parts (loading count 20 - 30 - 30 - 40 - the rest)
used a javascript to add the php generated code to the main gallery :smiley: good thing i still remember to code a little bit :joy:

hope it works well
i probably can create a php script that create the parts dynamically also instead of using different chunks of code copy pasted but at the end it doesnt matter just hopefully it works :slight_smile:


It doesn’t seem to be making any difference for me. When I initially open the page, I see that my browser makes 38 requests. Then when I gently scroll down the page, at some moment the total number of requests jumps to 200, all from images it tries to download, and with many requests failing.

i see… so i guess the page still load the images even when they are not visible on the page…

is there a way to write php code on the fly to make it work?
like adding it to the innerHTML or something like that?

Ran into one problem…so let me tell you

You have a problem with logic here


you use anchor (#)
which then leads to the bottom of the page where you have some contact information
but on top of that, you have 200 images which are then loaded immediately

because the anchor is like a super fast scroll (to the bottom of the page)

so then there is no lazy loading here…

Better to make a separate contact page

…btw mixed content

rename each http to https


yeah i see that anchor issue, every page has contact details on the bottom. so i guess i will have to redirect to the main page which kinda sux…

i dont know how the mixed content got in, had http only for outside links (facebook etc…)
anyway i change all http calls to https…

maybe i’ll need to add a “load more” button…
thanks for the help much appreciate!

can you please try it now:

i’ve added the “load more” text to load another part of the gallery…
thinking about doing it with a roll over and not click, maybe roll over with timer

I just checked and this works for me! The number of images downloaded when I click Load More seems to be around 80-90, and none of them fail for me now.

Good idea, pairing the current with some kind of infinite scroll functionality should indeed do the trick to make sure that images are only downloaded when someone scrolls down to view them.


you can have contact information at the bottom (or in each footer)
but don’t connect the data at the bottom with MENU as an anchor that then leads to some file in which you have a bunch of pictures.

make a separate page for that

if someone wants contact information so that they don’t have to spend 40MB of traffic that are consumed by images and other things.

it is easier for you to maintain a website when you have a separate contact page (modular)
it’s better for SEO, many bots don’t index #anchor at all
besides that, it is better because when Google indexes your page, it will make a special SERP
for your contact page (instead of printing as a result for your domain some random text that it sees in the first 400 characters), more visible to the general public, it is easier for AI to find and print such information.


that button you put actually generates duplicates
which can finally be seen in the list if it is sorted by file names

sometimes it calls up the same img 4 times

1 Like

@Oxy yes i see it now, wow thats so weird, what can cause this issue?

I assume that your PHP digs in images dir
and then loads and creates HTML code for images

but I guess you didn’t say anywhere that the files must be unique

update - ok I see now that it is actually JS

how much time did you spend, you could have already made html (full static code)

@OXY lol for sure… its just in case i will want to replace images so i wont have to manually do it one by one…

i actually tried storing the whole image list loaded into a string and add that. it works but still duplicates
i also checked in chrome and it doesnt happen there with the online site. i tried firefox on another site (instagram) and it happens there too

so i think its a firefox issue. and it loads the image twice, the 2nd time is from cache (also stating “cached” in the network tab)

so i think my button worked good :crazy_face: :triumph:

it’s not a bug in FF (but firefox just has an advantage and shows the right state)

rather, the matter is that some chrome-based browsers (edge) in the network tab
they don’t list duplicates, so it seems like they load only unique ones
but look at the pictures on the page and you will see that they are repeated

on chrome

and go to settings and delete all cache when testing in chrome


ok I found the problem

your list (IDs) contains duplicates - human error (it is the same for other numbers)

instead of that button, you could solve it so that your JS waits for 10 seconds and calls the function …and so on until it loads all the images

something like setTimeout(function() { loadMore(); }, 10000);

only smarter (loop) and a certain number of times until there is nothing left to load

besides, you have jQuery, so it’s easier for you to use that than writing vanilla.


these lists are generated with php
its not duplicates you can see that the 2nd is the thumbs in the src
and the first is just the path to the high res for the modal

ill try to look into it again :frowning:

looks at my screenshot more carefully !!!

or if I need to explain further ?

in id4 you call the picture with that number
but in id5 you call it again

and so you have several pictures mixed in various IDs - and hence the duplicates

1 Like