0

现在我正在使用以下 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，所以最后，带宽使用问题仍然存在。

客户不愿意切换到自托管选项，所以我只能想办法尽可能减少他们的带宽使用量，这样他们将来就不会被多收费用。

由于我只能访问编辑模板文件，我还能做些什么来强制在页面加载之前更改图像 src？

谢谢你。

4

2 回答 2

1

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

于 2015-02-07T17:43:07.417 回答
0

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

这样做的原因是，您不能使用 Javascript 修改 DOM 对象，直到它被浏览器解析并成为 DOM 的一部分，并且在完成时，浏览器可能已经开始从其原始网址。所以，你被困住了。在它已经开始加载之前，您无法使用 Javascript 访问它，这意味着您的低带宽服务器在您更改 URL 之前已经看到了请求。

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

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

于 2015-02-06T18:40:21.167 回答