1

所以我拥有的是以下 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>

现在，mythumb.php 是一个缩略图脚本，它将动态创建具有预定义大小限制（在本例中为 800x600）的缩略图。

但是在我的 CSS 文件中，我设置了

.large img
{
width:400px;
height:300px;
}

这样做是为了在 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 调用的图像，而不是页面上的其他静态图像

有没有人认为这样的事情是可能的？

4

3 回答 3

1

在 html 中布局您的 img 标签，但省略 src 属性

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

在 js 中设置图像路径数组：

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"
}

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

$('.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");
})
于 2012-12-17T21:02:10.603 回答
0

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

<img data-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" />

然后你可以像这样迭代它们：（如果你有很多imgs，不推荐）

var imgs = document.getElementsByTagName('img');​​
for (var i = 0; i < imgs.length; i++) {
    if (notRetina) {
        imgs[i].src = imgs[i].getAttribute('data-src')
        .replace('h=600', 'h=300')
        .replace('w=800', 'h=400');
    }
}

您可能比替换更好地放置您想要的值（例如不将它们放在 data-src attr 中）。

于 2012-12-17T21:06:20.560 回答
0

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

  1. 使用 javascript 设置 src 并最初让它指向一个占位符。
  2. 设置内联标签的样式。

如果每次图像的大小都不同，我会选择第二个选项，因为它更容易而且更快

所以：

<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>

800 和 600 值将使用 php 设置。

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

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

于 2012-12-17T21:07:37.940 回答