Bild laden optimieren

Question

Ich benutze lightbox2 plugin. Ich habe zwei Bilder: ori-img.jpg ist ungefähr 10MB, während mein thumb-img.jpg nur 200KB ist. Wenn der Benutzer auf den Daumen-img.jpg klickt, wird ein Modal mit dem ori-img.jpg angezeigt. Ich möchte wissen, ob:

1. Die ori-img.jpg (10MB) wird geladen, wenn die Seite geladen? Was bedeutet, dass alle Originalbilder geladen werden, bevor der Benutzer sie öffnet?
2. Wie verhindert man, dass Benutzer unnötige zusätzliche Internetdaten verbrauchen, um nicht geöffnete Bilder (Original) zu laden?

Teilbeispielcode unten in gallery.php

<a class="example-image-link" href="images/ori-img.jpg" data-lightbox="example-set" data-title="Original Image"> 
<img class="example-image" src="images/thumb-img.jpg" alt="Thumbnail Image"> 
</a> 

Answer 1

zu welchem ​​Zweck Sie möchten, dass Benutzer 10 MB Bilder zeigen? Sieht für mich etwas übergewichtet aus und du kannst die Bilder auf 1-2 MB optimieren. Es hängt vom Font-End-Teil ab, wie die Bilder geladen werden. Es ist möglich, sie dynamisch zu laden. Siehe Beispiel hier Loading Images into Div Dynamically, https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/, Programmatically change the src of an img tag.

Lightbox2 keine Bilder vorzuladen, wenn Sie den HTML-Code wie dieser

<a href="images/image-1.jpg" data-lightbox="image-1" data-title="My caption">Image #1</a> 

hier einige Details http://lokeshdhakar.com/projects/lightbox2/#options

definieren