Optimiser la charge de l'image

Question

J'utilise le plugin lightbox2. J'ai deux images: ori-img.jpg fait environ 10MB alors que mon pouce-img.jpg est seulement 200KB. Lorsque l'utilisateur clique sur le thumb-img.jpg, un modal avec le fichier ori-img.jpg sera affiché. Je veux savoir si:

1. Le fichier ori-img.jpg (10MB) est chargé lorsque la page est chargée? Ce qui signifie que toutes les images originales seront chargées avant même que l'utilisateur l'ouvre?
2. Comment empêcher l'utilisateur de consommer des données Internet supplémentaires inutiles pour charger l'image non ouverte (original)?

code exemple partiel ci-dessous dans 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

Dans quel but vous voulez montrer aux utilisateurs des images 10MB? On me dit qu'ils sont un peu surpondérés et que vous pourriez optimiser les images à quelque chose comme 1-2 Mo. Cela dépend de la partie font-end du chargement des images. Il est possible de les charger dynamiquement. Voir l'exemple ici Loading Images into Div Dynamically, https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/, Programmatically change the src of an img tag.

lightbox2 ne précharger les images si vous définissez le code HTML comme celui-ci

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

ici quelques détails http://lokeshdhakar.com/projects/lightbox2/#options