JavaScript懒加载详解
目录
- 懒加载
- CSS样式：
- HTML部分：
- script部分 ：
- 总结
懒加载 顾名思义比较懒，不想全部加载出来，当用户什么时候想看我在加载后面的东西
概括：懒加载其实就是延时加载，即当对象需要用到的时候再去加载。
实现原理：
首先你要有很多个第一张用来加载的图片，加载完毕之后显示后面所需的图片
【JavaScript懒加载详解】步骤实现：
1.加载load图片
2.判断哪些图片要加载
3.隐形加载图片
4.替换真图片
CSS样式：
img {width: 400px; height: 300px; display: block; }.row{width: 300px; height: 400px; }
HTML部分：
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
为什么有两个路径？因为一个img中有一张真图片和一张假图片，我们得用先用假图片进行加载，然后用真图片去替换，下图中假图片为左侧，真图片为右侧
文章图片
script部分 ：
为什么用for-of而不用for-in或者for循环？具体可以去参考ES6中for-of获取的是什么
效果如下：
完整代码：
懒加载 - 锐客网 img {width: 400px; height: 300px; display: block; }.row{width: 300px; height: 400px; }
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
文章图片
下面附上加载图片，当然了也可以自己找的（自己找的话我觉得挺麻烦的—.—），如果其他图片也“懒”的自己找的话可以私我我整理好发给你?( ′???` )
文章图片
总结 本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！
推荐阅读
- 事件代理
- 使用composer自动加载类文件
- 数组常用方法一
- 无故.
- 二十一|二十一 - 草稿
- JavaScript|vue 基于axios封装request接口请求——request.js文件
- 众泰T500智能互联双加载，让汽车生活更有趣
- ImageLoaders 加载图像
- JavaScript|JavaScript: BOM对象 和 DOM 对象的增删改查
- JavaScript|JavaScript — 初识数组、数组字面量和方法、forEach、数组的遍历