Bilder bei click nachladen (lazy load), ohne jquery

Rednaxel

Grünschnabel
Hallo,
ich lade in einer Bildergalerie kleine Vorschaubilder und möchte die großen Bilder erst laden, wenn/falls der user das erste Bild klickt.

HTML:
<a class="makebig" href="#1"><img src="1_small.jpg></a>
...
<a class="makebig" href="#N"><img src="N_small.jpg></a>

<a href="#_" class="box" id="1"><img class="lazy" data-src="1_big.jpg" src="1_small.jpg"></a>
...
<a href="#_" class="box" id="N"><img class="lazy" data-src="N_big.jpg" src="N_small.jpg"></a>

Derzeit ist es mittels jquery und lazy von http://jquery.eisbehr.de/lazy/ implementiert.
Javascript:
<script type="text/javascript" src="jquery.js" ></script>
<script type="text/javascript" src="jquery.lazy.js"></script>

<script>
    $(function() {$('a.makebig').click(function() {$('.lazy').Lazy({bind: "event",delay: 0});});
    });
</script>

Ich vermute das geht auch mit ein paar Zeilen Javascript - ohne die beiden Bibliotheken, habe aber im web nichts passendes gefunden und selbst auch keine Kenntnisse in Javascript. Die aktuelle Umsetzung funktioniert, verringert die herunter zu ladenden Kilobyte, ist aber gemäß Speedindex von Lighthouse langsamer als alle Bilder zu laden.
Kann mir jemand helfen?

Die Seite ist aktuell zu sehen unter:
https://alexanderkonopka.de/people_test.html
bzw. ohne das laden erst beim klick:
https://alexanderkonopka.de/people.html
Vielen Dank,
Alexander
 
Das nachladen der grossen Bilder ist kein Problem.Ich überlege nur wie man die kleinen Vorschau Bilder hinbekommen soll. Wenn man ein kleines und ein grosses hat würde das auch gehen ,aber so fält mir nix ein ,ich glaube mit php geht das aber javascript? Wie soll Javascript ein Vorschau Bild erstellen ohne das vorher geladen zuhaben?Da verzweifel ich gerade dran? Oder hastdu kleines und grosses Foto?
 
Hallo Basti,
ich habe kleine und große Foto. Die kleinen werden schon in der Galerie geladen und angezeigt.
Es geht darum die großen erst zu laden wenn man darauf klickt.
Mit den beiden Bibliotheken klappt das auch so wie gewünscht, ich würde es nur gerne schlanker implementieren.
Ich hoffe jetzt ist klar was ich meine.
Danke erstmal für die Antwort.
Alex
 
Du möchtest das ohne ohne Bibiliothek haben?
Ist Jquery erlaubt?
Ich mache da mal was fertig, bin jetzt wach
 
Guten Morgen,
so schlank wie möglich wäre mir am liebsten. Ich weiß nicht ob jquery notwendig/sinnvoll ist. Ansonsten benötige ich es nicht.
Eine funktionierende Variante mit jquery und jqery.lazy habe ich bereits. Ohne die lazy Bibliothek wäre ja schon mal schlanker.
Danke schon mal.
 
Hier habe ich mal Beispiel gemacht.Nicht wundern habe keine anderen Bilder gefunden im Netz.
Die Ladezeit dauert etwas weil habe extra grosse Fotos genommen( über 10 Mb Gross ) damit man auch sieht das die erst beim anklicken geladen werden.
http://sebastian1012.bplaced.net/Forum_Scripte/bilder-nachladen.html
Erstmal zum testen.Da ist jetzt Jquery mit drinne, aber das sollte auch ohne gehen.Das mache ich dann wenn ich das richtige gebaut habe und nicht wieder Bahnhof verstanden haben.

EDIT Moment ist noch ein Fehler drinne
 
Ich habe eine abgespeckte Seite erstellt:
https://alexanderkonopka.de/test.html

HTML:
<!DOCTYPE HTML>
<html lang=DE>
<head>
<style>
body{margin-left:200px;margin-right:200px;margin-top:140px}
img.displayed{display:block;margin-left:auto;margin-right:auto;max-width:100%;height:auto;padding-bottom:0}
input[type=checkbox]{display:none}input[type=checkbox]:checked ~ #menu{display:block;margin:0 auto}
img{max-width:100%;max-height:90%;vertical-align:bottom;margin-bottom:20px}
.mauerflex{display:-ms-flexbox;-ms-flex-wrap: wrap;-ms-flex-direction:column;-webkit-flex-flow:row wrap;flex-flow:row wrap;display:-webkit-box;display:flex}
.mauerflex div{-webkit-box-flex: auto;-ms-flex:auto;flex:auto;width:300px;margin:.5vw;text-align:center}
.mauerflex div img{height:auto;max-height:100%;margin-bottom:0;margin-left:auto;margin-right:auto}
.mauerflex div img:hover{opacity:.9}
.box{display:none;position:fixed;z-index:999;width:100%;height:100%;text-align:center;color:rgba(0,0,0,1);top:0;left:0;background:rgba(255,255,255,.95)}
.box img{max-width:100%;margin-top:2%;max-height:90%;vertical-align:bottom;margin-bottom:20px}
.box:target{outline:none;display:block}
</style></head>
<body>
<div class="mauerflex">
<div><a class="w400" href="[URL='https://alexanderkonopka.de/test#Gesicht']#Gesicht[/URL]"><img src="[URL]https://alexanderkonopka.de/bilder_people/Gesicht_w400.jpg[/URL]" width=400 height=267></a></div>
<div><a class="w400" href="[URL='https://alexanderkonopka.de/test#Frau_mit_Spiegelbild']#Frau_mit_Spiegelbild[/URL]"><img src="[URL]https://alexanderkonopka.de/bilder_people/Frau_mit_Spiegelbild_w400.jpg[/URL]" width=400 height=267></a></div>
<div><a class="w400" href="[URL='https://alexanderkonopka.de/test#Bart_und_Uhr']#Bart_und_Uhr[/URL]"><img src="[URL]https://alexanderkonopka.de/bilder_people/Bart_und_Uhr_w400.jpg[/URL]" width=400 height=267></a></div>
</div>
<a href="[URL='https://alexanderkonopka.de/test#_']#_[/URL]" class="box" id="Gesicht"><img class="lazy" data-src="https://alexanderkonopka.de/bilder_people/Gesicht.jpg" src="[URL]https://alexanderkonopka.de/bilder_people/Gesicht_w400.jpg[/URL]"></a>
<a href="[URL='https://alexanderkonopka.de/test#_']#_[/URL]" class="box" id="Frau_mit_Spiegelbild"><img class="lazy" data-src="https://alexanderkonopka.de/bilder_people/Frau_mit_Spiegelbild.jpg" src="[URL]https://alexanderkonopka.de/bilder_people/Frau_mit_Spiegelbild_w400.jpg[/URL]"></a>
<a href="[URL='https://alexanderkonopka.de/test#_']#_[/URL]" class="box" id="Bart_und_Uhr"><img class="lazy" data-src="https://alexanderkonopka.de/bilder_people/Bart_und_Uhr.jpg" src="[URL]https://alexanderkonopka.de/bilder_people/Bart_und_Uhr_w400.jpg[/URL]"></a>

<script type="text/javascript" src="[URL]https://alexanderkonopka.de/js/jquery-3.3.1.slim.min.js[/URL]" ></script>
<script type="text/javascript" src="[URL]https://alexanderkonopka.de/js/jquery.lazy.min.js[/URL]" defer></script>
<script defer>
$(function() {$('a.w400').click(function() {$('.lazy').Lazy({bind: "event",delay: 0});});
});
</script>

</body>
</html>

Wenn du darauf aufsetzt wäre es für mich am einfachsten. Die funktioniert soweit, aber eben mit zwei Bibliotheken.
Deinen Code habe ich nicht geschafft zu adaptieren für mich.
 
Zurück