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

每个Volusion产品都有两个字段，您可以在其中指定URL，Photo URL Small和Photo URL Large。这可以指向产品图像的内部或外部位置。

Answer 2

从客户端Javascript开始，在浏览器开始加载之前，您无法在页面的HTML中更改img.src。您无法单独从客户端Javascript修复问题。

原因是您无法使用Javascript修改DOM对象，直到它被浏览器解析并成为DOM的一部分，并且在完成时，浏览器可能已经启动从原始URL加载图像。所以，你被卡住了。您无法使用Javascript直到它已经开始加载，这意味着您的低带宽服务器已经看到了请求，然后才能更改URL。

这里的真正解决方案（我认为您知道）是更改页面的HTML以修复URL。或者，如果您希望通过Javascript设置图像的主机名，那么您可以更改img标记以使用data-src属性而不使用src属性，然后您可以使用Javascript来设置{ {1}}属性到你想要的。这可行，因为当图像没有src属性时，浏览器可以解析src标记，但不会开始加载任何内容（因为没有<img>属性）。

也可以使用配置为重写图像URL的服务器端代理。

在页面加载原始src之前更改图像SRC

2 个答案: