防止在 html 中加载图像

Question

我正在开发网站的移动版本，不幸的是，由于使用的是过时的 CMS，我无法为页面更改或提供替代模板 - 因此我只有 css 和 javascript（可能还有 .htacess ) 供我使用。

我环顾四周，我认为可能有一种方法可以防止使用 jquery 加载图像：Prevent images from loading - 但是，这似乎不起作用（图像仍在加载。）话虽如此，懒惰的加载程序似乎可以做到这一点，我已经看到它被 IRL 使用 - 所以我相当确定有办法。

我真正想要的是一种在我的 html 中的元素上设置 .mobileonly 类并让 jquery 阻止加载它们以及其中的任何内容的方法。

任何指针都会很棒，谢谢大家！

干杯！ 约翰。

Answer 1

在我看来，延迟加载会为您完成这项工作。
对于您不想加载的每个图像，您可以放置​​一个小的默认图像，并将 URL 存储在例如“名称”属性。给它css类'mobileonly'。随心所欲。
然后对于非移动访问者从 body.onLoad 调用一个 js 函数，它会找到所有具有 css 类 'mobileonly' 的 imgs 并延迟加载从 name 属性检索到的 url。

还要考虑：通常移动设备不仅带宽更少，而且运行 js 的 cpu 功率也更少。所以所有不在移动设备上运行的 js 都会让你的网站更快。 :-)