设为首页
收藏本站
开启辅助访问
切换到宽版
登录
注册
快捷导航
发布信息
搜索
搜 索
本版
文章
帖子
圈子
用户
首页
Portal
社区
BBS
话题
Guide
圈子
Group
淘帖
Collection
头条
广播
follow
动态
帮助
Help
标签标签
插件插件
日志日志
相册相册
分享分享
记录记录
排行榜
工具工具
发帖际遇
本版
文章
帖子
圈子
用户
魔力剪辑
»
社区
›
剪辑分类
›
AE资源
›
网站图片打开太慢,何为懒加载?原理又是什么?网站图片 ...
网站图片打开太慢,何为懒加载?原理又是什么?网站图片打开太慢,何为懒加载?原理又是什么?网站图片打开太慢,何为懒加载?原
查看 :
729
回复 :
1
店小二
Lv.8
超级版主
发表于 2023-2-28 02:32:05
|
显示全部楼层
|
阅读模式
浙江杭州
悬赏
1
金币
已解决
网站图片打开太慢,何为懒加载?原理又是什么?
最佳答案
风华绝代
2023-2-28 02:32:05
1 懒加载的概念 懒加载也叫做 延迟加载、按需加载 ,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。 如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。这样使得网页的加载速度更快,减少了服务器的负载。懒 ...
查看完整内容>>
回复
使用道具
举报
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
风华绝代
Lv.8
论坛元老
发表于 2023-2-28 02:32:06
|
显示全部楼层
浙江杭州
本帖最后由 风华绝代 于 2023-2-28 02:38 编辑
1 懒加载的概念
懒加载也叫做 延迟加载、按需加载 ,指的是在长网页中延迟加载图片数据,是一种较好的网页性能优化的方式。在比较长的网页或应用中,如果图片很多,所有的图片都被加载出来,而用户只能看到可视窗口的那一部分图片数据,这样就浪费了性能。
如果使用图片的懒加载就可以解决以上问题。在滚动屏幕之前,可视化区域之外的图片不会进行加载,在滚动屏幕时才加载。这样使得网页的加载速度更快,减少了服务器的负载。懒加载适用于图片较多,页面列表较长(长列表)的场景中。
2 懒加载的特点
减少无用资源的加载:使用懒加载明显减少了服务器的压力和流量,同时也减小了浏览器的负担。
提升用户体验: 如果同时加载较多图片,可能需要等待的时间较长,这样影响了用户体验,而使用懒加载就能大大的提高用户体验。
防止加载过多图片而影响其他资源文件的加载 :会影响网站应用的正常使用。
3 懒加载的实现原理
图片的加载是由src引起的,当对src赋值时,浏览器就会请求图片资源。根据这个原理,我们使用HTML5 的data-xxx属性来储存图片的路径,在需要加载图片的时候,将data-xxx中图片的路径赋值给src,这样就实现了图片的按需加载,即懒加载。
注意:data-xxx 中的xxx可以自定义,这里我们使用data-src来定义。
懒加载的实现重点在于确定用户需要加载哪张图片,在浏览器中,可视区域内的资源就是用户需要的资源。所以当图片出现在可视区域时,获取图片的真实地址并赋值给图片即可。
使用原生JavaScript实现懒加载:
知识点:
(1)window.innerHeight 是浏览器可视区的高度
(2)document.body.scrollTop || document.documentElement.scrollTop 是浏览器滚动过的距离
(3)imgs.offsetTop 是元素顶部距离文档顶部的高度(包括滚动条的距离)
(4)图片加载条件:img.offsetTop < window.innerHeight + document.body.scrollTop;
示例:
<div class="container">
<img src="loading.gif" data-src="pic.png">
<img src="loading.gif" data-src="pic.png">
<img src="loading.gif" data-src="pic.png">
<img src="loading.gif" data-src="pic.png">
<img src="loading.gif" data-src="pic.png">
<img src="loading.gif" data-src="pic.png">
</div>
<script>
var imgs = document.querySelectorAll('img');
function lozyLoad(){
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
var winHeight= window.innerHeight;
for(var i=0;i < imgs.length;i++){
if(imgs.offsetTop < scrollTop + winHeight ){
imgs.src = imgs.getAttribute('data-src');
}
}
}
window.onscroll = lozyLoad();
</script>
4 懒加载与预加载的区别
这两种方式都是提高网页性能的方式,两者主要区别是一个是提前加载,一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力。
懒加载也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力。它适用于图片很多,页面很长的电商网站的场景。懒加载的实现原理是,将页面上的图片的 src 属性设置为空字符串,将图片的真实路径保存在一个自定义属性中,当页面滚动的时候,进行判断,如果图片进入页面可视区域内,则从自定义属性中取出真实路径赋值给图片的 src 属性,以此来实现图片的延迟加载。
预加载指的是将所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源。 通过预加载能够减少用户的等待时间,提高用户的体验。我了解的预加载的最常用的方式是使用 js 中的 image 对象,通过为 image 对象来设置 scr 属性,来实现图片的预加载。
回复
使用道具
举报
照妖镜
返回列表
发新帖
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
|
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
店小二
Lv.8
超级版主
未知城市
|
未知职业
UP主暂无自我介绍,什么也没写!
1
关注
1
粉丝
1
主题
发表新帖
返回列表
快速回复
Ta的主题
网站图片打开太慢,何为懒加载?原理又是什么?网站图片打开太慢,何为懒加载?原理又是什么?网站图片打开太慢,何为懒加载?原
2023-2-28
广告
图新鲜
模特陆萱萱黑色露肩礼裙搭配魅惑黑丝泰国旅
2024-12-03
宅男女神易阳ELLY,低胸性感黑白条纹紧身长
2023-02-14
置顶帖 动图测试下动图测试下动图测试下动
2023-03-07
多架飞往福州的航班中途备降,福州机场回应
2024-10-22
新华社快讯:梁强当选越南国家主席
2024-10-22
广告
热门排行
1
模特陆萱萱黑色露肩礼裙搭配魅惑黑丝泰国旅拍
2
宅男女神易阳ELLY,低胸性感黑白条纹紧身长裙时尚前卫穿搭,展示魔鬼般完美身材
3
置顶帖 动图测试下动图测试下动图测试下动图测试下动图测试下动图测试下动图测试下动图测试下动图测试下动
4
多架飞往福州的航班中途备降,福州机场回应
5
韩国抗议朝鲜派兵援俄,俄方首度回应
6
新华社快讯:梁强当选越南国家主席
7
外交部:中国驻缅甸曼德勒总领馆遭爆炸袭击,中方已向缅方提出严肃交涉
8
“朝俄合作在国际法框架内” 俄方首度回应
9
假进口的“进口水果”,不能再骗下去了