图片在点击之后

前言

在前端性能优化的话题中，我们经常能够看见，图像延迟加载。

<img href="image.webp" alt="Image description" loading="lazy">
在延迟加载的情况下，只有用户向下滚动，知道出现在用户眼前，图片才开始加载。在面对大量图片的情况下，极大的提高了页面的加载速度。

我们今天不讨论这种情况，讨论一些图片如何在点击的时候才开始加载。

不带src属性使用

对于img标签，浏览器通过是被src中的链接，来请求图片，进而将图片加载到画面中。所以我们可以将src的内容置空，这样浏览器就无法请求图片，然后通过将连接赋值在其他属性下，起到存储图片地址的作用。

<img data-src="图片地址" src="" alt="图片">

这里的图标是浏览器自己生成的。

document.querySelectorAll("img").forEach((item) => {
  item.addEventListener("click", (event) => {
    const image = event.target.getAttribute("data-src");
    event.target.setAttribute("src", image);
  });
});

这种方法虽然简单易用，但是在图片加载失败的时候，会产生一个破损图像的图标，并且我们也没有方法去修改这个图标，而且我们这里必须设置alt属性，如果不设置的话，破损图标也没法显示。有人可能在想通过css来设置一个图标，类似这样！

img[src$="加载失败的图片"] {
  object-fit: contain;
  outline: 1px solid #ddd;
  outline-offset: -1px;
}

但我想说虽然可以设置一张很小的图片，但是还是要去请求图片，与预想不符合。

使用<a>创建图像

我们选择超链接来试试：

<a href="图片">点击查看图片<a>

这样确实是可以显示图片，但是缺点是，打开的是一个图片的链接。并不符合我们的预期。但是这种方式确实是不
所以我们需要改造他。

我们可以使用 JavaScript 来阻止链接在点击时加载，获取该href链接中的属性，创建一个图像元素，最后将该图像扔到页面上并在完成后删除旧元素：

document.querySelectorAll(".load-image").forEach((item) => {
  item.addEventListener("click", (event) => {
    const href = event.target.getAttribute("href");
    const newImage = document.createElement("img");
    event.preventDefault();
    newImage.setAttribute("src", href);
    document.body.insertBefore(newImage, event.target);
    event.target.remove();
  });
});