Оптимизируйте загрузку изображения

Question

Я использую плагин lightbox2. У меня есть два изображения: ori-img.jpg около 10 МБ, а мой thumb-img.jpg - всего 200 КБ. Когда пользователь нажмет на thumb-img.jpg, появится модальный с ori-img.jpg. Я хочу знать, если:

1. При загрузке страницы загружается ori-img.jpg (10MB). Значение всех исходных изображений будет загружено, прежде чем пользователь даже откроет его?
2. Как предотвратить использование пользователем ненужных дополнительных интернет-данных для загрузки незакрытого изображения (оригинал)?

Частичный пример кода ниже в 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

Для какой цели вы хотите, чтобы показать изображения 10 Мбит пользователей? Мне кажется, что они немного перегружены, и вы можете оптимизировать изображения примерно до 1-2 МБ. Это зависит от части шрифта, как загружаются изображения. Их можно загружать динамически. См. Пример здесь Loading Images into Div Dynamically, https://perishablepress.com/3-ways-preload-images-css-javascript-ajax/, Programmatically change the src of an img tag.

Lightbox2 не подожмем изображения, если вы определяете HTML, как этот

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

здесь некоторые детали http://lokeshdhakar.com/projects/lightbox2/#options