Question

当我点击HTML页面上的图片时，我会执行2个操作。这两个动作是：

更改触发器（它是一个特定的操作，点击后它可以正常工作）
换一张照片。（它也有效）

这是我的HTML代码的一部分：

<div class="col c1-11">
      <p><a onclick="return toggle(this);" data-on="/trigger/2" data-off="/trigger/3" href="/trigger/3"><img src="images/mur1/V_1_OFF.png" /></a></p>
</div>

<div class="col c1-11">
      <p><a onclick="return toggle1(this)" data-on="/trigger/4" data-off="/trigger/5" href="/trigger/5"><img src="images/mur1/V_2_OFF.png"></a></p>
</div>

这是我的javascript代码的部分：

function toggle(element)
{
  var onLink = element.getAttribute('data-on');
  var offLink = element.getAttribute('data-off');

  if (element.getAttribute("href") == offLink){
    element.setAttribute("href", onLink);  //It works
    element.getElementsByTagName('img')[0].src = "images/mur1/V_1_ON.png";
  } else if (element.getAttribute("href") == onLink){
    element.setAttribute("href", offLink);  //It works
    element.getElementsByTagName('img')[0].src = "images/mur1/V_1_OFF.png";
  }
    return false;
}

function toggle1(element)
{
  var onLink = element.getAttribute('data-on');
  var offLink = element.getAttribute('data-off');

  if (element.getAttribute("href") == offLink){
    element.setAttribute("href", onLink);  //It works
    element.getElementsByTagName('img')[0].src = "images/mur1/V_2_ON.png";
  } else if (element.getAttribute("href") == onLink){
    element.setAttribute("href", offLink);  //It works
    element.getElementsByTagName('img')[0].src = "images/mur1/V_2_OFF.png";
  }
    return false;
}

我有3个问题，希望你能帮助我:-)：

第一个问题：考虑到我的页面上有很多图片，每张图片需要一个功能吗？我想这会很长。
第二个问题：例如，我点击了我的图片1;我屏幕上的图片变为"images/mur1/V_1_ON.png"，没问题。但是如果我离开我的页面并且我再次来到这个页面，它会重新加载并且默认情况下，图片是<img src="images/mur1/V_1_OFF.png" />，就像在我的html代码中一样。如何在屏幕上保留"images/mur1/V_1_ON.png"？显然，即使我更改了html页面，我也必须保存<img>的状态。你知道我该怎么办？
第三个问题：当我的html页面出现在屏幕上时，它有点长，因为屏幕上有很多图片;我怎样才能让它更快？预装图片？

提前谢谢。

Answer 1

考虑到我的页面上有很多图片，每部图片需要一个功能吗？

而是为每张图片添加功能。使用名称或类作为选择器将事件处理程序附加到文档上的图像。因此只需要一个功能。

如何在屏幕上保留“images / mur1 / V_1_ON.png”？显然，即使我更改了html页面，我也必须保存我的状态。你知道我该怎么办？

您可以保存在HTML5本地存储中选择的图像。然后在加载页面时检查存储并显示正确的图像。

当我的html页面出现在屏幕上时，它有点长，因为屏幕上有很多图片;我怎样才能让它更快？预装图片？

下面列出的选项很少，

您可以实施CDN以更快地恢复图像。
Data URL可用于图片
可以实施缓存

Answer 2

至于问题的第一部分，您可以使用web storage。在您的情况下，您需要在每次单击Web存储后保存图像状态，并在用户Web存储中存在状态时检查页面加载（即使用window.onLoad事件）。

至于第二部分，我相信你唯一能做的就是缩小图像尺寸。

Answer 3

不，您不需要为每张图片使用一个功能。您需要跟踪每张图片的可能图像src。您可以动态计算（可能有点脆弱，但如果遵守命名约定则可以），或者将该信息保存在图像元素本身（作为另一个data-属性）。
```
<img src="images/mur1/V_1_OFF.png" data-on="images/mur1/V_1_ON.png" data-off=images/mur1/V_1_OFF.png />
```
您可以使用服务器端会话并呈现正确的服务器端状态，也可以使用localStorage或sessionStorage客户端，并在应用时应用这些状态更改页面加载。
你有X图片你必须下载;你无法避免这种情况。但是，您可以使用sprite等技术来保存请求，以及将图像存储在优化和缓存的CDN中。

如何在更改html页面时保存变量的状态

3 个答案: