课程咨询: 400-996-5531 / 投诉建议: 400-111-8989
认识达内从这里开始
认真做教育 专心促就业
懒加载和预加载都是需要web前端开发程序员熟练掌握的两种网页加载方式，而本文我们就通过案例分析来简单了解一下，懒加载和预加载之间的区别分析。
一、懒加载lazyload
懒加载：又叫延迟加载、按需加载，当我们打开一个网页，优先展示的屏图片就先加载，而其他的图片，等到需要去展示的时候再去请求图片资源。
目的：更好的加载页面的屏内容，对于含有不少图片的比较长的网页来讲，能够加载的更快，避免了次打开时，一次性加载过多图片资源，是对网页性能的一种优化方式。
原理：浏览器解析到img标签的src有值，才会去发起请求，那么就可以让图片需要展示时，才对其src赋值真正的图片地址。
实现细节
1如何加载图片
用img的data-src属性存放真正需要显示的图片的路径，当页面滚动直到图片出现在可视区域时，将data-src中的图片地址值赋值给src属性值。
2如何判断一个元素出现在可视区域
监听滚动事件，用getBoundingClientRect()获取DOM元素在页面的位置，该函数返回rect对象，如下图所示，如果rect.bottom为负数，rect.top大于页面高度，或者rect.right为负数，或者rect.left大于页面宽度，则认为元素已不在页面的可视区域。
二、预加载preload
预加载：提前加载所需要的图片资源，加载完毕后会缓存到本地，当需要时可以立刻显示出来。
目的：看完一张图片，再看下一张时，会有一段空白的加载时间，如果网络不是很好，加载的时间就会比较久，预加载可以让用户无需等待，获得直接预览的良好体验。
应用场景：看漫画时，如果我们看完2了，想看3，3却还没加载完就会大大降低体验感，而如果能在我们预览2这段时间里就提前加载好3，等到我们看3时就直接里面显示。那么就体验会好很多。
实现方法
1通过CSS
步骤
创建用来预加载的标签
给标签使用背景图，背景图的路径是需要预加载的图片资源，并将图片移到看不见的地方，或缩小到看不见。
当使用到已经预加载好的图片时，会直接使用缓存好的图片资源，而不需要向服务器发送请求。
2通过JavaScript
步骤
将需要预加载的图片资源的URL保存在数组里
循环遍历URL数组执行以下步骤，直到结束
创建一个image对象newImage()
将image对象的src属性的值指定为预加载图片的URL
【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。更多内容请加抖音达内三江区域学习了解。
< 上一篇：贵阳达内Java培训机构哈希算法基础知识分享
下一篇：贵阳达内Java培训浏览器缓存类型与执行步骤分享 >
2024-01-19
免费试听课程
- 全部课程
- IT课程
- 设计课程
- 运营课程
4578
最新开班时间
- 北京
- 上海
- 广州
- 深圳
- 南京
- 成都
- 武汉
- 西安
- 青岛
- 天津
- 杭州
- 重庆
- 哈尔滨
- 济南
- 沈阳
- 合肥
- 郑州
- 长春
- 苏州
- 长沙
- 昆明
- 太原
- 无锡
- 石家庄
- 南宁
- 佛山
- 珠海
- 宁波
- 保定
- 呼和浩特
- 洛阳
- 烟台
- 运城
- 潍坊
- 开课名称
- 开班时间
- 抢座
- 咨询
- 开课名称
- 开班时间
- 抢座
- 咨询
-
- Java全链路开发
- 3月31日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 3月31日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 3月31日
- 火热抢座中
- 立即咨询
- 人工智能工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 3月31日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 3月31日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 3月31日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 3月31日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 3月31日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 3月31日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 3月31日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 3月31日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 3月31日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 3月31日
- 火热抢座中
- 立即咨询
- 云计算全栈开发
- 3月31日
- 火热抢座中
- 立即咨询
-
- 网络安全工程师
- 3月31日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 3月31日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 3月31日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 3月31日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 3月31日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 3月31日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 3月31日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 3月31日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 3月31日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 3月31日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 3月31日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 3月31日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 3月31日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 3月31日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 3月31日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 3月31日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 3月31日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 3月31日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 3月31日
- 火热抢座中
- 立即咨询
-
- Java全链路开发
- 3月31日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- 数据分析与商业智能
- 3月31日
- 火热抢座中
- 立即咨询
- C++物联网工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- Web全栈开发
- 3月31日
- 火热抢座中
- 立即咨询
- 软件测试工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- AI大模型全栈工程师
- 3月31日
- 火热抢座中
- 立即咨询
- 鸿蒙原生应用开发
- 3月31日
- 火热抢座中
- 立即咨询
-
- 智能职场办公
- 3月31日
- 火热抢座中
- 立即咨询
- VFX商业视效设计
- 3月31日
- 火热抢座中
- 立即咨询
-
- AGI商业设计变现
- 3月31日
- 火热抢座中
- 立即咨询
- UID全链路设计
- 3月31日
- 火热抢座中
- 立即咨询
-
- 新媒体电商运营
- 3月31日
- 火热抢座中
- 立即咨询
-
- 云计算全栈开发
- 3月31日
- 火热抢座中
- 立即咨询
- 网络安全工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- C++物联网工程师
- 3月31日
- 火热抢座中
- 立即咨询
- Web全栈开发
- 3月31日
- 火热抢座中
- 立即咨询
-
- 软件测试工程师
- 3月31日
- 火热抢座中
- 立即咨询
- AI大模型全栈工程师
- 3月31日
- 火热抢座中
- 立即咨询
-
- 鸿蒙原生应用开发
- 3月31日
- 火热抢座中
- 立即咨询
- 智能职场办公
- 3月31日
- 火热抢座中
- 立即咨询
-
- VFX商业视效设计
- 3月31日
- 火热抢座中
- 立即咨询
- AGI商业设计变现
- 3月31日
- 火热抢座中
- 立即咨询
-
- UID全链路设计
- 3月31日
- 火热抢座中
- 立即咨询
- 新媒体电商运营
- 3月31日
- 火热抢座中
- 立即咨询
预约申请试听课
400-111-8989
lihm@tedu.cn
