当前位置:网站首页>页面懒加载
页面懒加载
2022-07-31 06:28:00 【weixin79893765432...】
前言
懒加载又叫延迟加载,主要指页面中图片、视频等大型资源文件的懒加载。
对页面中的图像做懒加载处理时,用户滚动到图像之前,可视区域外的图像是不会加载的。这与图像预加载正好相反。
懒加载的优点:
- 提升用户体验,加快首屏渲染速度;
- 减少无效资源的加载;
- 防止并发加载的资源过多会阻塞 js 的加载;
懒加载的原理(以图片的懒加载为例说明一下):
首先将页面上的图片的 src 属性设为空字符串,而图片的真实路径则设置在 data-original 属性中,当页面滚动的时候需要去监听 scroll 事件,在 scroll 事件的回调中,判断我们的懒加载的图片是否进入可视区域,如果图片在可视区内则将图片的 src 属性设置为 data-original 的值,这样就可以实现延迟加载。
一、JavaScript 懒加载
二、vue 懒加载
Vue实现懒加载的基本思路
Vue路由懒加载原理及实现
vue路由懒加载:import() 和 require()
三、react 懒加载
四、webpack 懒加载
边栏推荐
猜你喜欢
随机推荐
手把手教你开发微信小程序自定义底部导航栏
2022.07.26_Daily Question
关于求反三角函数的三角函数值
嵌入式系统驱动初级【2】——内核模块下_参数和依赖
2022.07.29_Daily Question
Chapter 9 Exceptions try...except...else...finally
nohup原理
tidyverse笔记——tidyr包
interrupt and pendSV
超级详细的mysql数据库安装指南
强化学习科研知识必备(数据库、期刊、会议、牛人)
基于LSTM的诗词生成
LeetCode:952. 按公因数计算最大组件大小【欧拉筛 + 并查集】
2022.07.12_Daily Question
The Ballad of Lushan Sends Lu's Servant to the Void Boat
【面试:并发篇37:多线程:线程池】自定义线程池
2022.07.13_每日一题
Kubernetes调度
【解决】npm ERR A complete log of this run can be found in npm ERR
Zero-Shot Learning & Domain-aware Visual Bias Eliminating for Generalized Zero-Shot Learning