JavaScript懒加载详解

目录

• 懒加载
• CSS样式：
• HTML部分：
• script部分 ：
• 总结

懒加载

顾名思义比较懒，不想全部加载出来，当用户什么时候想看我在加载后面的东西

概括：懒加载其实就是延时加载，即当对象需要用到的时候再去加载。

实现原理：

首先你要有很多个第一张用来加载的图片，加载完毕之后显示后面所需的图片

步骤实现：

1.加载load图片
2.判断哪些图片要加载
3.隐形加载图片
4.替换真图片

CSS样式：

HTML部分：

 为什么有两个路径？因为一个img中有一张真图片和一张假图片，我们得用先用假图片进行加载，然后用真图片去替换，下图中假图片为左侧，真图片为右侧

script部分 ：

为什么用for-of而不用for-in或者for循环？具体可以去参考ES6中for-of获取的是什么

效果如下： 

完整代码：

下面附上加载图片，当然了也可以自己找的（自己找的话我觉得挺麻烦的  —.—），如果其他图片也“懒”的自己找的话可以私我我整理好发给你   ღ( ´･ᴗ･` )

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容！