前言
在前端性能优化的话题中，我们经常能够看见，图像延迟加载。
<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(); }); });
