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 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
or
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
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.
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 good thing i still remember to code a little bit
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
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.
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)
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.
@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)
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
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
good thing i still remember to code a little bit 
