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

АЛЬТЕРНАТИВА: Есть ли способ загрузить сжатый файл со всеми изображениями и распаковать его в браузере?

Форматы изображений уже сжаты. Вы ничего не получите, сшивая и пытаясь сжать их еще больше.

Вы можете просто склеить изображения вместе и использовать background-position для отображения разных их частей: это называется "спрайтинг". Но спрайтинг полезен в основном для небольших изображений, чтобы сократить количество HTTP-запросов к серверу и несколько уменьшить задержку; для больших изображений, таких как страницы манги, польза не так велика, возможно, ее перевешивает необходимость получать одно огромное изображение сразу, даже если пользователь собирается прочитать только первые несколько страниц.

АЛЬТЕРНАТИВА: Я также думал о сохранении в виде строк и последующем декодировании

Что бы это дало? Передача в виде строк в большинстве случаев будет значительно медленнее, чем необработанные двоичные файлы. Затем, чтобы превратить их из JavaScript-строк в изображения, вам придется использовать URL data:, которые не работают в IE6-IE7, и ограничены в том, сколько данных вы можете в них поместить. Опять же, это предназначено в первую очередь для небольших изображений.

Я думаю, все, что вам действительно нужно, это стандартный прелоадер изображений.

Вы можете предварительно загрузить изображения в javascript, используя:

var x = new Image();
x.src = "someurl";

Это будет работать как то, что вы описали как «сохранение изображения в строках».

Спрайтинг

Просто посмотрите, как это делает facebook: http://b.static.ak.fbcdn.net/rsrc.php/z3JQK/hash/11cngjg0.png

Одно изображение загружается быстрее, чем серия маленьких картинок. Для отображения иконки вы просто создаете div с фиксированными размерами и перемещаете фон внутрь него. Ваш div работает как область просмотра для большого изображения. Вы используете background-position для перемещения к соответствующей части изображения. Все остальное скрыто.

Разные домены

То, о чем вы, вероятно, не знали - Internet Explorer имеет ограничение на количество соединений на одном сервере. Вы можете прочитать об этом здесь: http://support.microsoft.com/?scid=kb;en-us;183110&x=17&y=11 (here are exact numbers).

Что это значит - если пользователь использует IE7, он сможет загрузить ТОЛЬКО 4 (или 2) файла одновременно с вашего сервера, независимо от скорости его интернет-соединения.

Чтобы ускорить процесс, вы можете создать несколько поддоменов: server1.mydomain.com, server2.mydomain.com, server3.mydomain.com и т.д. - и тогда пользователь сможет загружать множество файлов намного быстрее, потому что вы используете разные хосты для обслуживания разных файлов.

Примечание: JPG и PNG уже сжаты.

Вы можете попробовать использовать технику "CSS sprites". Идея заключается в том, что вы используете свою любимую программу редактирования изображений для сшивания всех ваших изображений в одно изображение. Это быстрее, потому что вы теряете накладные расходы на кодирование изображения и его отправку. На стороне клиента вы используете CSS, чтобы выбрать только ту часть общего изображения, которая используется в любом месте.

http://www.alistapart.com/articles/sprites/
http://www.fiftyfoureleven.com/weblog/web-development/css/css-sprites-images-optimization

И/ИЛИ

Вы можете использовать ленивую загрузку, чтобы загружать изображения только тогда, когда они появляются в поле зрения.
http://www.appelsiini.net/projects/lazyload

Как все готово, я начинаю загружать изображения (URL хранятся в JS var). URL хранятся в JS var) с моего сервера, по одному за раз (или каким-то более быстрым способ), так что я могу сделать своего рода прогресс bar.

Ваш браузер уже сначала загружает HTML, вот как он знает, что нужно загружать любые JS/изображения, на которые вы ссылаетесь. Вы пытаетесь изобрести что-то, что уже существует.

Просто убедитесь, что ваша манга состоит из множества изображений известного размера, которые вы указываете в тегах img. Большинство браузеров имеют что-то вроде индикатора выполнения, чтобы показать, что он загружает ресурсы для вас. Вы не сможете ускорить загрузку больших изображений, если не улучшите скорость, с которой ваш сервер обслуживает их, или интернет-соединение пользователя, или не сожмете их, чтобы сделать файлы изображений меньше (вероятно, ценой качества изображения).

Предварительные загрузчики изображений существуют уже давно. Вам действительно не нужно загружать их все сразу, вы можете сделать это по запросу [когда пользователь загружает следующую страницу, вы можете получить изображение после нее]

• Моя страница загружает основное (HTML+CSS+JS) (конечно)
• Как все сделано, я начинаю загружать изображения (URL хранятся в JS var) с моего с моего сервера, по одному за раз (или каким-то более быстрым способом), так что я могу сделать что-то вроде прогресс-бара.
• Изображения не обязательно должны отображаться сразу, мне просто нужен обратный вызов. когда они будут готовы.

Если вы хотите загрузить 10 изображений как можно быстрее, разместите 10 тегов на странице, по одному для каждого изображения. Используйте Javascript для скрытия всех изображений, кроме текущего; добавьте ссылки next/back, которые используют JS для скрытия текущего изображения и показа следующего. Многие браузеры уже имеют некоторую форму прогресс-бара, и если все сделать с помощью обычного старого HTML, он будет работать правильно.

Вы пытаетесь заново изобрести всю эту функциональность с помощью Javascript без веской причины. Вы не сделаете это лучше, чем браузер.

При всем при этом, это, вероятно, плохая идея. Вы можете загрузить 15 МБ страниц комиксов в окно браузера только для того, чтобы пользователь покинул его после прочтения первой страницы. Вместо того, чтобы пытаться предварительно загрузить все изображения, вы должны использовать JS, чтобы всегда предварительно загружать следующую страницу (или две), а не всю страницу.

Вот кое-что, что вы можете попробовать, что случайно я только что закодировал:

(function() {
  var imgs = [ "image1.png", "image2.png", ... /* all your image names */ ],
    index = 0,
    img;

  function loader() {
    if (index >= imgs.length) return;
    (img = new Image()).onload = loader;
    setTimeout(function() { img.src = "/path/to/images/" + imgs[index++]; }, 1);
  }

  loader();
 })();

Вставьте все имена ваших изображений (или те, которые вы хотите предварительно загрузить) в массив, и убедитесь, что этот скрипт запускается, когда ваши страницы начинают загружаться. Он будет работать со списком изображений, загружая их, а затем переходя к следующему, когда каждое изображение заканчивается. (Вызов setTimeout предназначен для того, чтобы убедиться, что обработчик "onload" не вызывается, пока вы все еще находитесь внутри обработчика.)

Вы, вероятно, захотите сделать это для многих из них. изображения для всего вашего сайта - другими словами, каждая страница будет пытаться загрузить изображения для всего. Разумеется, когда они окажутся в кеше, это не займет много времени. В качестве альтернативы, вы можете запустить этот сценарий только на нескольких страницах, таких как экраны «входа в систему» ​​и главная «домашняя» страница. Конечно, если у вас есть такой сайт, как Flickr, вы, вероятно, не захотите предварительно загружать все свои изображения: -)