Lazy loading,在浏览器滚动像素识别,在首屏的图片先完成加载,其它屏幕外的图片通过将资源标识为非首先加载,从而在需要加载的时候再加载,从而提升网页浏览体验。
假如不使用懒加载的情况下,浏览器会默认加载网页所有的图片,这样对服务器性能和带宽带来不小的挑战,用户体验也不好。降低负载的方法是将用户浏览器的图片先完成加载,如果用户滚动页面,再加载需要的图片。
以前我们是使用lazyload.min.js方案实现这个功能,在Chrome和FireFox的更新中,加入对延迟加载的功能,只需要修改loading属性就可以了。
使用方法
# 延迟加载资源
<img src="./图片地址" loading="lazy" alt="页面关键词">
# 立即获取资源
<img src="./图片地址" loading="lazy" alt="页面关键词">
1、文章版权归作者所有,未经允许请勿转载。
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505
2、本站所有文章,如无特殊说明或标注,均为本站原创发布。任何在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们邮箱:526009505@qq.com进行处理。
3、咨询请联系QQ:526009505
你可能也喜欢
- ♥ 做个小网站的成本费用是多少?08/09
- ♥ 怎么搭建一个炫酷的网页制作?08/08
- ♥ META标签http-equiv=”refresh”实现网页自动跳转的教程07/08
- ♥ 选择网站建设公司的3个步骤07/14
- ♥ 网页设置禁止鼠标右键防copy的代码07/19
- ♥ Web.config设置IIS7主机实现页面301重定向的方法06/17