对于目前的图片懒加载, 我们一般采用的是通过第三方库或懒加载库来实现, 但是该方式的显著问题就是, 必须按顺序执行:
1, 加载初始的 html 响应内容
2, 加载懒加载库
3, 加载图片
假如浏览器能直接支持懒加载, 那是最好的, 这一想法也不是不可能哦! 从 Chrome 75 开始, 我们可以通过切换两个开关来手动启用懒加载功能, 可能最新的 Chrome 将会默认开启懒加载功能了, 就是说不用我们手动去设置了.(注意这里仅说到了是 Chrome 浏览器哦)
loading 特性的原理:
原生懒加载功能使用了一种预检请求来获取图片文件的前 2048 字节数据. 根据预先取得的数据, 浏览器会试着确定该图片的大小, 在第一个 (如果图片大小小于 2KB, 一个预检请求就够了) 或第二次请求完成后, 完整图片一加载完毕, 其 load 事件就会解除监听.
我们可以通过一段脚本来判断浏览器是否支持懒加载功能, 如果支持, 可直接在 img 标签中写上 loading 并设置相关的值即可轻松实现懒加载, loading 有三个值, 分别是 auto(默认值, 浏览器自行决定是否启用懒加载),eager(直接加载该图片),lazy(开启懒加载).
使用以下脚本可以判断浏览器是否支持原生懒加载功能:
- <script>
- if("loading" in HTMLImageElement.prototype){
- alert("支持");
- }else{
- alert("不支持, 你可能需要引入懒加载库来实现懒加载");
- }
- </script>
如果支持, 我们可以在 img 标签中为 loading 指定值:
- <img src="" alt=" 浏览器自行决定是否启用懒加载 " loading="auto">
- <img src="" alt=" 浏览器立即加载该图片 " loading="eager">
- <img src="" alt=" 浏览器使用懒加载 " loading="lazy">
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/08400eceadd2