为网页图片加上loading="lazy"延迟加载资源(懒加载)

    选择打赏方式

HTML元素<img>延迟加载属性 —— loading属性值lazy允许浏览器选择性加载IMG元素,根据用户滚动操作至其元素附近执行加载,一定程度起到节流的作用。

那么问题来了,哪些场景业务需要用到图片懒加载技术呢?

答:当前页面图片元素过多,避免不必要的流量浪费;如果不是需要加载很多图片的话那还是不要用了,影响用户体验~

使用方法

<img src="load.jpg" loading="lazy" alt="傲世网" />
你没看错,和普通的img标签相比,只多出了loading="lazy"这个属性,就是这么简单;它就是今天所要了解的主角。

可选值

loading="lazy"
loading="eager"
lazy 懒加载,即:延迟获取资源。

eager 立即加载,即:缺省值,你不加这个loading属性,它默认就是这个。

版权声明:若无特殊注明,本文为《小傲世》原创,转载请保留文章出处。
本文链接:https://pjax.vip/225.html
正文到此结束

热门推荐

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

呵呵 哈哈 吐舌 开心 笑眼 可怜 乖 啊 你懂得 不高兴 生气 汗 黑线 哭 真棒 阴险 鄙视 酷 滑稽 纳尼 疑问 委屈 惊讶 勉强

评论信息框
可使用QQ号实时获取昵称+头像

私密评论

吃奶的力气提交吐槽中...


既然没有吐槽,那就赶紧抢沙发吧!