懒加载的基本原理与实现
程序员文章站
2022-04-18 12:46:57
...
懒加载其实就是延时加载,即当对象需要用到的时候再去加载。
懒加载的优点:
-
不需要将对象的实例化全部写到viewDidLoad中,可以简化代码,增强代码的可读性
-
对象的实例化在getter方法中,各司其职,降低耦合性
-
对系统的内存占用率会减少;
基本原理:
一张图片就是一个<img>
标签,浏览器是否发起请求图片是根据<img>
的src属性,所以实现懒加载的关键就是,在图片没有进入可视区域时,先不给<img>
的src赋值,这样浏览器就不会发送请求了,等到图片进入可视区域再给src赋值。
原理如下图:当图片还没有进入可视区时,图片不加载,图片一旦进入可视区,图片开始加载
实现效果:
实现懒加载有四个步骤,如下:
1.加载loading图片
2.判断哪些图片要加载;
3.隐形加载图片
4.替换真图片
当前图片到顶部的距离 <= 滚动距离 + 可视区的高度, 则图片需要加载
实现效果的js代码:
// 所有的图片
var aImage = document.getElementsByTagName('img');
// 可视区的高度
var height = document.documentElement.clientHeight;
// 滚动时触发
window.onscroll = function(){
loadMore()
}
function loadMore(){
var scrollTop = document.documentElement.scrollTop;
// 遍历所有的图片,看那需要显示,哪些不需要显示
for(var i = 0; i < aImage.length;i++){
var top = aImage[i].offsetTop;
// 根据滚动距离 、 可视区的高度、图片距离顶部的距离
// 判断当前是否需要显示
if(top <= height + scrollTop){
aImage[i].src = aImage[i].getAttribute('_src');
}
}
}
上一篇: 2 3D转换及过渡
推荐阅读
-
JavaScript实现的XML与JSON互转功能详解
-
real media editor php radio 单选框获取与保持值的实现代码
-
php实现压缩多个CSS与JS文件的方法,
-
从URL中提取参数与将对象转换为URL查询参数的实现代码_javascript技巧
-
CentOS下与Apache连接的PHP多版本共存方案实现详解
-
jquery网页加载进度条的实现
-
php实现与erlang的二进制通讯实例解析
-
PHP实现的大文件切割与合并功能示例
-
图的邻接矩阵、邻接表遍历(python实现)(递归与非递归)(dfs bfs)
-
EasyNVR摄像机网页无插件直播方案H5前端构建之:bootstrap弹窗功能的实现方案与代码