Question

我开始怀疑在阅读其他一些帖子之后是否有可能

如果我在页面上包含src属性设置的所有图像我是否正确认为无法阻止图像加载跨浏览器？

如果我只包含data-src属性，没有JS的用户将无法看到图像。

我正在考虑某种形式 <noscript> 解决方案，但这不会使页面语义上不好吗？

Answer 1

在标记中使用带有img属性的普通src标记，然后使用JavaScript清空要延迟加载的图像的src属性并适当处理延迟加载。禁用JavaScript的用户将正常加载所有图片，启用了JavaScript的用户将获得更具响应性的浏览体验。

Answer 2

实际上，这是可能的。只需像这样将decoding attribute设置为异步即可。

<img src="/path/to/file.jpg" decoding="async"></img>

请注意，并非所有浏览器都支持此功能（* 咳嗽 * Internet Explorer * 咳嗽 *），但是主流的优秀浏览器对此的支持正在增长。

此外，我假设您最想延迟加载图片的最可能原因是使网站加载速度更快。如果是这种情况，那么您只需将图像转换为jpegs并用compressor.io / JPEGmini压缩它们即可（仅将jpeg文件上传到这两者并使用其中的任意一个即可），从而使您的网站加载速度更快甚至更快。压缩后结果变小。