Javascript 是否可以通过Jscript为图像获取CSS定义的大小，并在加载图像之前更改URL值？

所以我有下面的HTML结构

<div class="large">
<a href="http://www.google.com">
<img src="/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" /></a>
</div>

这样做是为了在iPhone/ipad等设备上实现视网膜效果

但是，我认为这最好是动态完成的，我希望能够提取CSS定义的宽度和高度，并替换URL中的那些值

在这种情况下，javascript有可能改变吗

/wp content/themes/firstone/mythumb.php？src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1

到

/wp content/themes/firstone/mythumb.php？src=http://www.example.com/test.jpg*&h=300&w=400*&zc=1&s=1

这种改变应该在图像加载之前发生，这样我们就不会浪费用户带宽下载同一图像两次

我还希望仅将此应用于从mythumb.php调用的图像，而不是页面上的其他静态图像

---

有人认为这样做是可能的吗？

在html布局中，您可以使用img标记，但省略src属性

<img id="test" class="variableRes" />
<img id="test1" class="variableRes"/>

您的css确定img大小，因此您可以查询img样式、构建url并将src分配给img标记

myImages = {
    test: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg",
    test1: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test1.jpg"
}

---

在html布局中，您可以使用img标记，但忽略src属性

<img id="test" class="variableRes" />
<img id="test1" class="variableRes"/>

您的css确定img大小，因此您可以查询img样式、构建url并将src分配给img标记

myImages = {
    test: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test.jpg",
    test1: "/wp-content/themes/firstone/mythumb.php?src=http://www.example.com/test1.jpg"
}

---

如果图像具有src，则无法阻止加载图像。您可以将其更改为另一个属性，如“data src”

$('.variableRes').each(function(){
    var $el = $(this);
    var id = $el.attr("id");
    var height = $el.css("height").substr(0,-2);//strip "px"
    var width = $el.css("width").substr(0,-2);
    $el.attr("src", myImages[id] + "&h="+ height +"&w="+ width+"&zc=1&s=1");
})

然后您可以这样迭代它们：（如果您有很多img，则不建议这样做）

var-imgs=document.getElementsByTagName（'img'）；​​
对于（变量i=0；i

---

您可能比替换更好地放置所需的值（比如不将它们放入数据src attr中）。

如果图像具有src，则无法阻止加载图像。您可以将其更改为另一个属性，如“data src”

$('.variableRes').each(function(){
    var $el = $(this);
    var id = $el.attr("id");
    var height = $el.css("height").substr(0,-2);//strip "px"
    var width = $el.css("width").substr(0,-2);
    $el.attr("src", myImages[id] + "&h="+ height +"&w="+ width+"&zc=1&s=1");
})

然后您可以这样迭代它们：（如果您有很多img，则不建议这样做）

var-imgs=document.getElementsByTagName（'img'）；​​
对于（变量i=0；i

---

在放入所需的值方面，您可能比替换做得更好（比如不将它们放入数据src attr）。

如果在服务器上的HTML源中设置图像的src，在大多数情况下，浏览器会两次获取图像。你可以做两件事：

使用javascript设置src，并首先让它指向占位符

内联设置标记的样式 如果每次图像的大小不同，我会选择第二个选项，因为它更容易，速度更快

因此：

800和600值将使用php设置

但是，如果在“大”的情况下大小始终相同，则可以使用您提到的javascript方法。它稍微慢一点，因为具有宽度和高度定义的CSS是异步获取的。您必须等待document.onload事件而不是domready事件，以确保您具有CSS宽度和高度定义。然后可以使用javascript获取div的宽度和高度，并构建图像src。因为onload可能需要很长时间（特别是当您有外部可能较慢的内容（如社交媒体按钮）时），所以在从服务器提取所有内容之前，图像将不可见

---

我将创建一个php大型服务器变量，并在任何地方使用它。它绝对是最快的，而且你仍然有一个地方的尺寸定义

如果在服务器上的HTML源中设置图像的src，在大多数情况下，会导致浏览器获取图像两次。你可以做两件事：

使用javascript设置src，并首先让它指向占位符

内联设置标记的样式 如果每次图像的大小不同，我会选择第二个选项，因为它更容易，速度更快

因此：

800和600值将使用php设置

但是，如果在“大”的情况下大小始终相同，则可以使用您提到的javascript方法。它稍微慢一点，因为具有宽度和高度定义的CSS是异步获取的。您必须等待document.onload事件而不是domready事件，以确保您具有CSS宽度和高度定义。然后可以使用javascript获取div的宽度和高度，并构建图像src。因为onload可能需要很长时间（特别是当您有外部可能较慢的内容（如社交媒体按钮）时），所以在从服务器提取所有内容之前，图像将不可见

---

我将创建一个php大型服务器变量，并在任何地方使用它。它绝对是最快的，而且你仍然有一个地方的尺寸定义

如果这些图像已经在页面上这样定义，则在请求发出之前基本上不可能捕获所有图像。@epascarello是否可以停止所有图像加载并让此脚本先运行？例如，jquery lazyload是否会在滚动到视图之前停止所有图像加载？jquery就像JS一样受到限制：它必须等到DOM完成后才能对其进行操作（假设您希望保证拥有所有图像）。另一方面，浏览器将在下载元素时逐步渲染这些元素。因此，不可能在文档中引用的图像开始加载之前捕获所有图像

<div style="width: 800px; height: 600px">
  <a href="http://www.google.com">
  <img src="/wp-content/themes/firstone/mythumb.php src=http://www.example.com/test.jpg&h=600&w=800&zc=1&s=1" width="800" height="600" border="0" /></a>
</div>