网络上的大多数图像都是多余的。如果我可能有点混蛋，那么其中99％的人甚至根本没有帮助（尽管有极少数例外）。那是因为图像通常不补充他们应该支持的文本，而是用户，将永远加载和炸毁像某种绩效税之类的数据上限。 值得庆幸的是，这主要是一个设计问题，因为使图像表现效果和更易于用户友好比以前要容易得多。我们具有更好的图像格式，例如Webp（也许很快，JPEG XL）。我们拥有反应式图像的魔力。那里有很多很棒的工具，例如ImageOptim，以及Addy Osmani的新书等资源。

尽管我最喜欢改善图像性能的方法是大量加载：

此图像仅在用户向下滚动页面时加载，因此用户可以看到它 - 从初始页面加载中将其删除，这真是太好了！使网页LightningFast的初始负载很重要。

。

所以！如果我们可以在网站上显示图像，但是只有在单击或轻拍它们后才显示图像怎么办？如果我们可以在单击时展示占位符并将其交换为真实图像，那不是很整洁吗？这样的东西：

好吧，我在这里有两个想法，即如何构建这个小伙子（黄金规则是，从来没有一种方法可以在网络上构建任何东西）。 方法＃1：使用没有SRC属性 我们可以删除标签的SRC属性以隐藏图像。然后，我们可以将映像文件放在属性中，例如data-src之类的东西，例如：

默认情况下，大多数浏览器都会显示您可能熟悉的损坏的图像图标：

好的，所以它可以访问。我猜？您可以自动看到屏幕上呈现的Alt标签，但是使用JavaScript的轻段，我们可以将SRC与该属性交换：

现在我们可以添加一些样式，ugh，哦，不：

啊

。在某些浏览器中，当图像未加载时，底部会有一个微小的损坏图像图标。这里的问题在于，浏览器并没有给您一种使用CSS删除损坏的图像图标的方法（无论如何我们可能不应该被允许）。为Alt文本设计了造型，这有点烦人。但是，如果我们完全删除Alt属性，则损坏的映像图标消失了，尽管这使得无JavaScript的无法使用。因此，删除alt文本是不做的。

如我所说：

ugh

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

方法＃2：使用链接来创建图像

我们拥有的另一个选项是从谦虚的超链接开始，例如：

Musab al Rawahi的热气球照片。 144KB

哪个，是的，还没有什么明智的事情 - 这只会呈现到图像的链接：

在可访问性方面起作用，对吗？如果我们没有任何JavaScript，那么我们所拥有的只是人们可以选择单击的链接。从性能方面，它的速度不能比纯文本快得多！

，但是从这里，我们可以访问javaScript以阻止链接在单击上加载，抓住该链接中的href属性，创建一个映像元素，最后，将图像扔到页面上并删除旧链接：

我们可能可以为此占位符链接设计，以使其看起来比下面的链接好一些。但这只是一个例子。继续并单击链接再次加载图像：

，你有它！这不是开创性的，或者我敢肯定有人在某个时候或其他方面做到了这一点。但是，如果我们想对第一个油漆和初始负载以外的性能非常激进，那么我认为这是一个很好的解决方案。如果我们正在制作仅文本网站，那么我认为这绝对是必要的。

Photograph of hot air balloons by Musab Al Rawahi. 144kb