Изменить изображение SRC до загрузки страницы оригинал src

Question

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

$.each($("img"), function(index, value) { 
    srcValue = "http://different-server.com/" + $(this).attr("src") 
    $(this).attr("src", srcValue) 
}); 

Так

src="v/image1.jpg" 
src="v/image2.jpg" 
src="v/image2.jpg" 

бы стать:

src="http://different-server.com/v/image1.jpg" 
src="http://different-server.com/v/image2.jpg" 
src="http://different-server.com/v/image3.jpg" 

Клиент использует Volusion своей корзине. Они вынуждены размещать свою корзину покупок на серверах Volusion, что позволяет только 3gb использования полосы пропускания в месяц, и они много платят за переезд.

Тележка построена в ASP, но у меня нет доступа к страницам ASP, а только к файлам шаблонов, и нам не разрешено связывать изображения продуктов с внешним источником.

Я был в состоянии загрузить файлы изображений для продуктов корзины покупок и разместить их на другом хосте без ограничения пропускной способности, но я чувствую, что этот код изменяет src ПОСЛЕ того, как браузер загружает исходные SRC изображения, проблема использования полосы пропускания все еще присутствует.

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

Есть ли что-то еще, что я могу сделать, чтобы заставить изображение srcs быть изменено до загрузки страницы, поскольку у меня есть только доступ к редактированию файлов шаблонов?

спасибо.

Answer 1

С клиентского Javascript вы не можете изменить img.src в HTML-формате страницы, прежде чем браузер начнет ее загружать. Вы не сможете исправить свою проблему только на стороне Javascript на стороне клиента.

Причина в том, что вы не можете изменить объект DOM с помощью Javascript до тех пор, пока он не будет проанализирован браузером и не станет частью DOM, и к моменту завершения он может начать загрузите изображение с его исходного URL. Итак, вы застряли. Вы не можете добраться до него с помощью Javascript до тех пор, пока он не начнет загружаться, что означает, что ваш сервер с низкой пропускной способностью уже видел запрос, прежде чем вы сможете изменить URL-адрес.

Реальное решение здесь (я полагаю, вы знаете) заключается в изменении HTML-страницы для исправления URL-адресов. Или, если вы хотите, чтобы имя хоста для изображений было настроено с помощью Javascript, вы можете изменить теги img, чтобы использовать свойство data-src, а не свойство src, а затем вы можете использовать Javascript для установки свойства src на то, что вы хотели. Это будет работать, потому что, когда изображения не имеют свойства src, браузер может проанализировать тег <img>, но ничего не начнет загружать (поскольку нет свойства src).

Серверные прокси, настроенные на переписывание URL-адресов изображений, также могут быть использованы.

Answer 2

Каждый продукт Volusion имеет два поля, в которых вы можете указать URL-адрес, URL-адрес фотографии Small и Photo Large. Это может указывать на внутреннее или внешнее местоположение для изображений продукта.