轻量级网站：使用延迟加载和锚点答案

【问题标题】：Lightweight website : using lazy loading and anchor轻量级网站：使用延迟加载和锚点
【发布时间】：2020-12-09 04:57:15
【问题描述】：

我正在尝试制作一个不使用（或只使用少量）JavaScript 的轻量级网站。所以只有 HTML 和 CSS。

我正在处理一个汇总图像的页面，当我们单击该图像时，它会滚动到摘要的末尾，在那里我会大规模显示每张图像并解释它的含义。

所以一切都与锚点的href一起工作，但问题是，由于我想让网站尽可能轻，我在我的图像上使用loading=lazy，但href锚点会触发每次加载...

有没有办法在不使用 JavaScript（或轻量级版本）的情况下同时使用 href 锚点和延迟加载？

【问题讨论】：

也许我可以隐藏所有“大尺寸”版本并添加一个类，当我们单击图像时显示它
我这样做了，但无法显示带有 url 的大滚动。所以我在页面加载时在 url 中添加了一个“#”测试，如果找到它，我会调用我的函数来显示大版本，然后 document.getElementById(document.URL.slice(document.URL.indexOf("#")+1).scrollIntoView() 滚动到它。

【解决方案1】：

我发现 scroll-behavior: smooth; 在 css 中触发加载途中的每张图片

因此，如果我不使用该转换，我就不必将 JS 放在该页面上！

但如果这是你真正想要的东西，你可以隐藏带有大图像的 div，并编写一个简单的函数来在你点击拇指时显示它。

【讨论】：