Предварительная загрузка тяжелых изображений - это сценарий зависания

Question

Я работаю в галерее изображений для клиента, который имеет изображения с высоким разрешением (что-то вроде 1280x1400px), и на самом деле мой скрипт делает это:

1. загрузить первое изображение и отобразить его
2. при загрузке первого изображения загрузите все эскизы для этой галереи (200x440px каждый или что-то в этом роде)
3. когда все миниатюры загружены, начинают кэшировать все изображения (последовательно) из миниатюр (я имею в виду изображение с полным разрешением), поэтому, когда пользователь выбирает второе изображение в списке, оно уже предварительно загружено

Проблема в том, что, когда второе изображение из эскиза начинает загружаться, браузер работает очень медленно и кажется, что зависает, кажется, что он занимает слишком много памяти или процессора, я действительно не знаю.

Есть ли способ предварительно загрузить его, как параллельно? или, может быть, другой способ создать галерею изображений с быстрой загрузкой? Я думал о том, чтобы иметь 2 версии каждого изображения с очень низким разрешением, чтобы использовать его в качестве заполнителя, а затем загрузить реальное изображение и заменить его (я думаю, именно так работает Галерея Google Plus)

Моя главная цель - создать действительно быструю галерею, потому что она может быть немного медленной, когда пользователь нажимает на изображение (каждый файл имеет размер 200 ~ 300 КБ)

Спасибо

Answer 1

Как насчет использования техники CSS-спрайтов для ваших миниатюр? Это позволит вам иметь одно большое изображение, содержащее все ваши эскизы.

Подход предварительной загрузки всех изображений кажется немного сложным (никто не беспокоится об использовании полосы пропускания?). Для быстрой доставки вы можете разместить их, используя вместо этого коммерческую CDN (сеть доставки контента) .

Answer 2

Ричард Эв дал хороший ответ. Я хотел бы добавить еще один метод доставки контента, который может оказаться полезным, а именно: распределение ресурсов по нескольким поддоменам. Лучшее объяснение (включая ограничения и т. Д.) Можно найти здесь , однако эта ссылка IE и эта статья также хорошо читаются.

По существу из-за ограничений браузера, которые реализуют старые стандарты HTTP, изображения не загружаются с высокой степенью распараллеливания (или какого-либо контента в этом отношении - стандарт количественно определяет открытые соединения), но вы можете заставить браузер открывать больше соединений, распространяя Доставка ресурсов по нескольким поддоменам. Как упомянуто в статье, существует верхний предел такого распространения, за которым он фактически замедляется.

Надеюсь, что это поможет (может или не может иметь отношение) или, по крайней мере, научит вас чему-то новому.

Answer 3

Приведите пример того, как вы пытаетесь предварительно загрузить изображение? Простейшим примером предварительной загрузки нескольких изображений параллельно будет что-то вроде

<script type="text/javascript">
    var photos = ["/images/foto1.jpg", "/images/foto2.jpg", "/images/foto3.jpg"];
    var images = new Array();
    for(var i = 0; i < photos.length; i++)
    {
        images[i] = new Image();
        images[i].src = photos[i];
    }
</script>