页面优化之懒加载与预加载
1.前言
PC端网速较快,现在普通都是百兆宽带,那么折算一下就是10M/s的下载速度,基本上资源如果在10M以内的话加载还是比较快的。
但是移动端就不行了。移动端需要消耗巨额的流量,所以尽量减少移动端流量消耗成为了移动端Web页面的一个重要需求。
一般前端页面的加载方式就分为两种:懒加载和预加载,懒加载也叫lazyload,两者容易混淆,
2.预加载
2.1预加载运用场景
在制作图片墙,相册这样的单页图片资源比较大的页面时,为了能让用户有流畅的使用体验,需要提前将图片缓存到本地,这就是图片预加载的用途。
2.2预加载的使用
优先加载图片,加载图片时显示loading图或者动画,然后再显示页面,这样用户就无需等待页面的空白而残忍地关闭页面了
var imgs = []function imgPreload(url, len, cb) {var img = new Image(), flag = 0img.onload = function () {flag++if (flag === len) {cb();}};img.onerror = function () {};img.src = url;
}for (var i = 0, len = imgs.length; i < len; i++) {imgPreload(imgs[i], len,function () {// 显示页面})
}
2.3预加载的缺陷
预加载一般是由于本身资源文件巨大,所以提前加载,这样的话加载时间也是比较长的。如果页面上图片很多,但是可以做按需加载那么就尽量不要使用预加载了。
注意:预加载只是把图片加载提前,并没有改变页面加载图片的数量。
3.懒加载
3.1使用场景
一般情况下资源比较多而且不需要一次性显示所有的图片
3.2实现
与预加载原理类似只是执行的时机不同,另外需要写一个图片地址列表以便加载图片
4.预加载和懒加载的妙用
页面上有多个按钮,并且需要点击之后展示不同的3d轮播图,此时资源图太大需要优化,例如用swiper实现
使用懒加载:点击弹窗之后加载本弹窗所需的图片,之后再初始化swiper,只需要一个swiper(替换图片就可以了)
使用预加载:所有图片预先加载,有一段等待时间,加载完之后swiper初始化(多个swiper列举了所有弹层)
然而这两种方法最后都有后遗症:
懒加载偶尔有时候swiper错乱,但是滑动之后又正常.........................................(略去一万字)
预加载时间又太长.............................
直到有大佬提醒了我我才搞定,那么是什么方法呢?
还是使用预加载:当滚动过了第一屏的时候,把所有的图片元素放到一个隐藏的div中去,让它去默默加载。直到点击弹层的时候,这时候必定已经加载完毕,把对应的图片添加到swiper中去然后初始化就可以了
页面优化之懒加载与预加载相关推荐
- jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...
- 图片的懒加载和预加载?
一.写在前面 图片的懒加载和图片的预加载都是前端性能优化的一个方案,当然可能存在不同的应用场景,下面我们将总结一下这两个方案. 二.图片懒加载 图片的懒加载是什么? 图片的懒加载指的是在长网页中延迟加 ...
- Jquery图片懒加载和预加载
Jquery图片懒加载和预加载 懒加载 1.什么是懒加载 Lazy Load也叫懒加载,延迟加载,顾名思义,就是在图片未到达可视区域时,不加载图片,我们常常在很多的优秀网站上看到类似的例子,例如迅雷. ...
- 懒加载和预加载的区别
概念: 懒加载:懒加载也叫延迟加载,JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 区别: 两者的行为是相反的,预加载是 ...
- javascript图片懒加载与预加载的分析
懒加载与预加载的基本概念. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技 ...
- css 同步加载,同步加载,异步加载,懒加载,预加载
同步加载 默认的就是同步加载 同步加载: 同步模式又称阻塞模式,会阻止浏览器的后续处理,停止了后续的文件的解析,执行,如图像的渲染.流览器之所以会采用同步模式,是因为加载的js文件中有对dom的操作, ...
- img加载本地图片_图片加载技术-懒加载和预加载
懒加载也就是延迟加载. 具体表现为: 当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张占位图的路径,这样就只需请求一次,只有当图片出现在浏览器的可视区域内时,才设置图片正真的路 ...
- 基于jQuery的图片异步加载和预加载实例
如今的网页中有很多图片,比如相册列表,那么如果一次性读取图片将会瞬间加重服务器的负担,所以我们用jQuery来实现图片的异步加载和预加载功能,这样在页面的可视范围内才会加载图片,当拖动页面至可视界面时 ...
- 图片的懒加载与预加载
懒加载 懒加载:也叫延迟加载,指的是在长网页中延迟加载图片的时机,当用户需要访问时,再去加载,这样可以提高网站的首屏加载速度,提升用户的体验,并且可以减少服务器的压力. 懒加载的实现原理是:将页面上图 ...
最新文章
- settimeout需要清除吗_【期刊导读】新证据:HBsAg水平极低的非活动性HBsAg携带者经聚乙二醇干扰素治疗24周, HBsAg清除率高达83.3%...
- postergresql mysql_PosttgreSQL快速入门:PostgreSQL的安装和配置
- windows下使用lighttpd+php(fastcgi)+mysql
- markdown编辑器基本用法
- python开发需要掌握哪些知识-Python的10个基础知识点,新手必须背下来!
- 【.net 深呼吸】在运行阶段修改应用配置文件
- rpmbuile 制作drbd RPM包
- LinQ高级查询、组合查询
- 【个人申明】主要发表平台迁至简书和公众号
- ospf-cost-FR选路实验
- GCC中SIMD指令的应用方法
- oldboy_09_03day
- 一分钱解锁全网视频会员?加入团队还能月入百万?
- mc有什么红石机器人_我的世界:mc玩家与非mc玩家眼中的世界,测一测你mc中毒有多深...
- linux没有c编译器,兄弟们,我这有台电脑里的Linux缺少cc(C编译器),我该怎么把它补上去啊?急啊!!!...
- Win10使用tensorflow出现ImportError: DLL load failed: 动态链接库(DLL)初始化例程失败
- 数学建模--因子分析模型
- wireshark抓包:分析阿里小蜜网络通信方式
- VS2015安装失败KB3022398 KB3165756
- 设置计算机访问权限密码忘了怎么办,苹果访问限制密码是什么?忘记怎么办【详解】...
热门文章
- 网卡驱动收包代码分析之 page reuse
- 2022ICPC预选赛 A Yet Another Remainder(数学)(构造)
- 金融工程 | 远期与期货的运用
- Android自定义View使用总结
- cadence软件问题解决集
- javahtml5健身房信息管理系统计算机毕业设计MyBatis+系统+LW文档+源码+调试部署
- docker安装mosquitto2.0.14问题
- AmchartsJS版设置属性/方法总结
- Linux 安装 rar 解压
- maple 求特征值