Динамически переписывать img src: получать изображения из другого каталога с более высоким разрешением
Мне интересно, каков будет лучший подход для решения следующей проблемы, учитывая скорость страницы.
- Соединитель синхронизирует данные о продукте (включая изображения продуктов) из розничного программного обеспечения с решением для электронной коммерции на основе PHP, таким как Magento.
- Этот разъем синхронизирует только изображения продуктов с разрешением 550×550.
- Невозможно изменить разъем или получить изображения большего размера из розничного решения.
- У рассматриваемого человека есть каталог с изображениями с более высоким разрешением, который — ради аргументов — будет соответствовать имени файла из исходного файла с суффиксом -опционального размера.
Как мы можем автоматически и динамически, при загрузке страницы / загрузке изображения, заменить изображение низкого разрешения src изображением высокого разрешения src?
Короче говоря: как заменить src="/path/to/low/resolution/image/shoe1.jpg с src="/path/to/high/resolution/image/shoe1-1024x1024.jpg" динамически без написания правил специально для этого единственного изображения. Как в: shoe2.jpg > shoe2-1024x1024.jpg также должен работать
Дополнительно: нам не нужно проверять наличие отсутствующих изображений в каталоге изображений с высоким разрешением. Мы просто хотим — всегда — заменить URL источника низкого разрешения.
Я думал о замене значений через javascript с / без jQuery. Будет ли это делать работу?
Решение
Вот решение jQuery:
var highRezPath = "/path/to/high/resolution/image/",
appendToFilename = "-1024x1024";
$(document).ready(function(){
$('img').each(function(ind, img){
var $img = $(img),
oSrc = $img.attr('src').split('/'),
fileName = oSrc[oSrc.length-1].replace('.', appendToFilename +'.'),
newSrc = highRezPath + fileName;
$img.attr('src', newSrc);
});
});
Смотрите это в действии здесь (используйте веб-инспектор, чтобы увидеть измененный src атрибуты)
Другие решения
Других решений пока нет …