如何在延迟加载图像的同时仍为禁用JavaScript的人显示图像 [英] How to lazy load images while still displaying for people with javascript disabled

问题描述

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

延迟加载图像如何

延迟加载图片

如果我在页面中包含所有带有src属性的图片，我认为它是正确的是不可能停止图像加载跨浏览器？

如果我只包含data-src属性用户没有JS将不会看到图像。

我正在考虑某种类型的
< noscript>
解决方案，但是这不会使页面语义化坏？ 使用正常 img 属性，然后使用JavaScript将图像中的 src 属性清零，以便您可以延迟加载并适当地处理延迟加载。禁用JavaScript的用户通常会加载所有图片，而启用了JavaScript的用户将获得更快速的浏览体验。

I'm starting to wonder if it is possible after reading some of the other posts

Lazy loading images how

Lazy loading images

If I include all the images on the page with src attributes set am I right in thinking that it is not possible to stop the images loading cross browser?

If I just include data-src attributes users without JS won't see the images.

I was thinking of some sort <noscript> solution but wouldn't this make the page semanticly bad?

解决方案

Use normal img tags with src attributes in your markup, then use JavaScript to null out the src attributes of images that you want to be lazy loaded and handle the lazy loading appropriately. Users with JavaScript disabled will load all of the images normally, and users with JavaScript enabled will receive a more responsive browsing experience.

这篇关于如何在延迟加载图像的同时仍为禁用JavaScript的人显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！