动态重写 img src：从不同目录获取分辨率更高的图片

Question

我想知道解决以下问题的最佳方法是什么，同时牢记页面速度。

连接器将产品数据（包括产品图像）从零售软件同步到基于 PHP 的电子商务解决方案，例如 Magento。
此连接器仅以 550x550 分辨率同步产品图像。
无法更改连接器或从零售解决方案中获取更大的图像。
有问题的人有一个包含更高分辨率图像的目录，为了参数的缘故，该目录将与原始文件的文件名匹配，并带有 -optional- 大小后缀。

我们如何在页面加载/图像加载时自动动态地用高分辨率图像 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 with/without jQuery 替换这些值。这样可以吗？

Answer 1

这是一个 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);
    });
});

See it in action here（使用网络检查器查看更改后的 src 属性）

动态重写 img src：从不同目录获取分辨率更高的图片

Rewrite img src dynamically: get images from a different directory with a higher resolution

php

jquery

image

magento

src