ich habe eine Bilderseite für meine Urlaubsbilder erstellt. Ich möchte das alles auf einer Seite darstellen, da ich das weiterklicken nicht möchte und es angenehmer finde auf einer Seite zu scrollen.
Jetzt habe ich das Problem, dass von ca. 100 Bildern (jeweils unter 500kB) nur ca. die ersten 30 laden. Danach wird im Browser nur angezeigt, dass die Bilder nicht da seien.
Wenn man die Reload drückt, werden Stück für Stück die Bilder nachgeladen.
Was kann ich tun, um den Workaround mit dem Reload zum umgehen? Woran liegt es, dass nicht alle Bilder geladen werden?
Ich habe mal eine Beispielseite gebaut, auf der das Verhalten zu sehen ist: ht tps://cli.re/gq3z4r
Das ganze tritt sowohl mobil bei iOS (Safari) und Android (Chrome) (aktuelle Versionen) auf, als auch am Desktop (Windows, Chrome).
Ich würde gerne ohne Javascript auskommen. LazyLoad wäre eine Idee, aber ohne Javascript geht das vermutlich nicht.
Ansonsten dachte ich vielleicht an ein php sleep()? So dass der Server nicht zuviele Anfragen auf einmal bekommt. Geht das?
Das wird wahrscheinlich tatsächlich an der Menge liegen, die gleichzeitig angezeigt werden soll.
Um etwaige Netzwerkattacken oder sonstige vielerlei Szenarien abzuwenden, besteht hier eine solche Obergrenze.
Bitte binde einfach nicht mehr als etwa 20 Bilder pro Seite ein, alternativ steht Dir ab bplaced max (siehe Upgrade Center) auch Webhosting auf eigenen Hochleistungssystemen mit weitaus höheren Grenzen zur Verfügung, wo hier auch hunderte Bilder kein Problem darstellen würden.
Hi miro, Danke für die Antwort.
Es sind weniger als 40 MB, die da angefordert werden. Das finde ich tatsächlich nicht viel. Vor allem wenn man bedenkt was ein einziges Video üblicherweise so abverlangt. Da geht das mal eben so raus.
40MB pro einzelnen Seitenaufruf würde ich schon als viel bezeichnen, da wird Dir auch Google und Co. ein nur sehr schlechtes Rating geben, denn die Seitengröße ist speziell bei mobilen Geräten immernoch und sicher noch eine Weile lang maßgebend.
Es ist keine Seite für Google (noindex), sondern ausschließlich an handverlesene private Empfänger. Jeder der die Seite bekommt weiß was ihn erwartet und will das sehen. Jedes Minivideo hat doch heute schon 40 MB. Ich finde das nicht viel.
Ein Video wird ja auch nur 1x geladen, das kann so groß sein was die Bandbreite her gibt, hier geht’s um das gleichzeitige Laden, die Größe ist hierbei egal, Du kannst problemlos ~20 Bilder mit jeweils 100MB laden wenn Du lustig drauf bist - aber nicht viel mehr Bilder auf einmal bzw. gleichzeitig
sleep() würde hier soweit nicht funktionieren, die Bilder bzw. deren Adressen zum Laden wurden ja bereits dem Browser ausgeliefert. Andere (java)scripte könnten hier für Abhilfe sorgen, wobei eine Blätterfunktion wohl eher sinnvoll wäre.
Einfach am besten nicht mehr als 20 Bilder pro Seite oder bplaced max, alles andere würde hier die Bandbreitenkontrolle aufwecken.
mache, dann müsste doch auch sleep funktionieren? dann würde das gesamte php skript eben bei einer 10 sekunden pause alle 10 bilder für gut 100 sekunden laufen. vielleicht eher die holzhammermethode aber funktionieren müsste es doch, oder? (habe mich jetzt eh mit javascript arrangiert, aber nur vom gedanken her)
die sleep() Funktion in PHP macht nur das dein PHP-Script 10 Sekunden “wartet”. Die Ausgabe wird aber normal als ein gemeinsames HTML an den Browser gegeben und dann eben gerendert: https://www.php.net/manual/de/function.sleep.php
Beispiel Ablauf:
PHP:
echo 'a';
sleep(10);
echo 'b';
Der Browser erhält dann nach ca ~10,004 Sekunden (Wartezeit) den Output, in dem Fall “ab” als komplett Ausgabe.
Heißt der Browser wartet ~10,0004 Sekunden bis er seinen Output (HTML) erhält.
Das nacheinander Rendern kannst du nur mit JavaScript (oder CSS) bewerkstelligen.
PS: ein Tag “< html >” gibt es so gesehen nicht für Body-Elemente. Dieses gibt an, welche “Child”-Elemente der Browser rendern soll: https://www.w3schools.com/tags/tag_html.asp
Dafür gibt es viele fertige Bibliotheken, wie z.B:
