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.
Derzeit ist es mittels jquery und lazy von http://jquery.eisbehr.de/lazy/ implementiert.
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
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