Избегайте повторного получения изображения с сервера

Question

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

Представьте, что javascript сначала загружает все 30 ~ 50 изображений с сервера. Эти изображения затем используются для создания миниатюрных изображений, каждое размером 60 на 60 пикселей или около того, для выбора пользователя. Этот эффект достигается с помощью CSS и некоторой свободно доступной библиотеки JavaScript.

После нажатия на одно из уменьшенных изображений javasrcipt размещает это изображение на более крупном холсте. Размер большего изображения определяется в соответствии с его исходным размером около 900 × 600 пикселей или более. Чтобы получить исходный размер изображения, я кодирую JavaScript на стороне клиента, аналогично следующему:

var img=new Image();
img.src="uploaded1.jpg";
var w,h;
w=img.width;
h=img.height;

Моя проблема в том, что такой дизайн кажется очень неэффективным с точки зрения трафика, потому что каждое изображение будет загружено 3 раза:

1. для рендеринга в галерею изображений
2. после выполнения кода javascript в img.src="uploaded1.jpg";
3. для рендеринга изображения большого размера после добавления узла DOM с помощью javascript: <img src="uploaded1.jpg" alt="big image"/>

Кроме того, я хочу разрешить пользователям загружать больше изображений в любое время и добавлять эти изображения в галерею изображений. Чтобы достичь этого, должен быть разработан некоторый javascript для загрузки с сервера точно таких же изображений, которые этот же браузер только что загрузил на сервер, чтобы их можно было добавить в DOM следующим образом:

<img src="new1.jpg" alt="new image 1"/>
<img src="new2.jpg" alt="new image 2"/>

Что не имеет смысла для меня, так это круговые обходы между браузерами и сервером, сделанные этими изображениями. Очевидно, что браузеру нет необходимости перезагружать те же изображения с сервера, когда браузер получает информацию об этих изображениях из первых рук.

Поскольку это тот же браузер, который загружает эти файлы изображений и отображает изображения, теоретически должен существовать какой-то способ сказать браузеру повторно использовать эти изображения - отображать их либо до, либо после загрузки. Страница должна быть спроектирована так, чтобы работать неэффективно, только потому, что в мире HTML нет возможности для javascript передавать изображение из памяти в браузер, манипулируя DOM.

SVG локальная ссылка на IRI может быть полезна. Я могу реализовать элемент <image> в <defs>, но я не уверен, что браузеры (особенно IE 9) снова будут вслепую получать одно и то же изображение с сервера каждый раз, когда на этот <image> ссылаются другие элементы. Просвещения о SVG будут высоко оценены.

Я также читал статьи о кэшировании http / браузера и у меня сложилось впечатление, что кэширование в браузере ненадежно, поскольку пользователи могут отключить кэш вручную, а размер кэша можно установить слишком маленьким для большого количества изображений. Кроме того, механизм кэширования не может исключить ненужную обратную передачу, как в ранее упомянутом сценарии «загрузить-затем-загрузить-изображение-добавить-в-галерею».

Кроме того, вспышка - это последнее, что я хочу изучать и использовать.

С наилучшими пожеланиями,

* +1039 * CN

enter code here

Answer 1

Я не уверен, но я думаю, что лучший способ сказать браузеру повторно использовать изображение - это не изменять имя файла или сам файл. К нему следует обращаться по одному и тому же пути каждый раз. Последующие запросы на тот же файл должны привести к загрузке файла из кэша браузера, верно? Способ достижения этого заключается в использовании алгоритма именования файлов, обеспечивающего всегда одно и то же имя для одного и того же изображения / эскиза. Если вы загружаете файл, AFAIK файл не находится в кэше браузера, из-за обычно другого имени файла, его нужно загрузить один раз. В моей практике кеши браузера обычно переусердствовали и кешировали слишком много данных (что вызывало проблемы с изменением файлов, загружаемых через AJAX, кэширование должно быть явно отключено для тестирования и включено для производства). Вы тестировали свой сайт с помощью трекеров ресурсов FireBug и Chrome?

Кстати, я надеюсь, что вы не рендерите увеличенное изображение на сервере. Это может быть довольно неэффективно, особенно если это делается часто. Объект Canvas имеет множество быстрых и простых методов для большинства основных задач по обработке изображений, поэтому единственное загруженное изображение должно быть загружено ранее. Единственное, что нужно сделать на стороне сервера - это уменьшить его. Это невозможно сделать напрямую на стороне клиента, потому что браузеры не могут получить доступ к локальным файлам с удаленного сайта. Каждое исключение из этого правила следует указывать как серьезную ошибку.

Маршрут {полноразмерный пользовательский файл} -> {сервер} -> {уменьшенный в размере} -> {клиент} представляется неизбежным.