解释:
啥叫懒加载呢？字面意思就是：懒惰加载, 举个栗子：

你去衣物实体店买东西，老板/工作人员肯定是拿出你喜欢的衣物，不可能把整个仓库的衣物都拿出来。

Tip
赖加载又称按需加载

常用的场景就是：

很多页面有很多图片，只有你眼睛能看到地方才会加载图片，还没看到的地方，就先不加载，毕竟谁能保证，你肯定会完完整整得把页面的图片全部看一遍呢？你中途如果不看了，岂不是白加载了？

本文案例也是围绕这个场景实现

优点:

  • 页面加载速度快
  • 减轻服务器压力
  • 节约流量
  • 用户体验好…

接着：

我现在都喜欢用 Jquery，它实在是太方便了。记得第一次学 Javascript 的时候，原生的 Api 实在是有些繁琐，对第一次接触的人来说，实在是太长了，何况咱英语也就小学的水平。

原生的

document.getElementById('k');

Jquery 的

$('#k');

这区别，所以应该不止我喜欢 jQuery 吧？

由于 jQuery 实在是太好用了，然后有很多大神，就写了很多插件，在 jQuery 的基础上写了很多的库!

比如这个网站上全是：点击访问

很多常用的需求，都能给你整出插件，比如啥：瀑布流呀，懒加载呀，轮播图呀…

有一说一，确实非常方便！！！

咳咳，说了些题外话 ，我也是小白，这方面的技术不是很懂。

我们今天的主题是：用原生/jq的lazyload插件写图片懒加载

那么，上代码

jQuery + lazyload库

CSS

.box {
    width: 800px;
    margin: 0 auto;
}
img {
    width: 100%;
    height: 500px;
}

HTML

<div class="box">
    <img data-original="01.jpg" />
    <img data-original="02.jpg" />
    <img data-original="03.jpg" />
    <img data-original="04.jpg" />
    <img data-original="05.jpg" />
    <img data-original="06.jpg" />
</div>

TIP
data-original标签，基于 jQuery 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。

注意事项:
需要真正实现图片延迟加载，必须将真实图片地址写在data-original属性中。若src与·data-original·相同，则只是—个特效而已，并不达到延迟加载的功能。

JavaScript

<script src="=./jQuery.js"></script>
<script src="./jq.lazyload.min.js"></script>
<script>
   ($)(_ => {
     $("img").lazyload({
       //渐变加载
       effect: "fadeIn"
     });
   })
</script>

总结：
十分无脑，不用关心原理，几行代码就能出效果.

原生
css

.box {
    width: 800px;
    margin: 0 auto;
    overflow-y: auto;
}

img {
    /* 设置宽高看能见效 */
    width: 100%;
    height: 500px;
    /* 为了有渐变显示 */
    opacity: 0;
    transition: all 0.4s;
}

HTML

<div class="box">
    <img data-src="01.jpg" />
    <img data-src="02.jpg" />
    <img data-src="03.jpg" />
    <img data-src="04.jpg" />
    <img data-src="05.jpg" />
    <img data-src="06.jpg" />
</div>

JavaScript

<script>
	// 获取img dom
	let el = document.querySelectorAll("img");
	// 创建IntersectionObserver女朋友
	let observer = new IntersectionObserver(entries => {
	entries.forEach(item => {
		// 当前元素可见时
		if (item.isIntersecting == true) {
			// 获取图片链接
			let data_src = item.target.getAttribute("data-src")
			// 设置图片src属性
			item.target.setAttribute("src", data_src)
			// 将图片设置为完全可见
			item.target.style.opacity = 1
			// 关闭当前标签的监视
			observer.unobserve(item.target)
		}
	});
});
	// 将所有的图片标签都套上
	el.forEach((e, i) => {
		// 开启监视图片标签
		observer.observe(e)
	});
</script>

总结： 相当轻便，低耦合

  • 这里用到了一个 Js 的类：IntersectionObserver，有兴趣可以去详细了解了解

最后

其实这些东西，没有什么优劣之分，仅仅只是工具，或者说是一种技术手段/方案，你觉得哪种合适就用哪种。

我学习一种学知识的时候，也是直接懵了完全不懂，然后慢慢琢磨，发现，也不是那么完全理解不了的！

我很享受这种堆积在心底很久的困扰被解开的那一瞬间-的感觉。

就是那种突然醒悟，脑洞打开了.

古人云：朝闻道，夕死可矣

读书的时候不懂，现在逐渐开始认同了

加油!此刻的自己一定比过去那个时候的自己又获得提升，向更完美的自己迈进了一步！