本文目录一览：
图片懒加载实现原理?
1、如果图片在可视区内将图片的 src 属性设置为data-original 的值，这样就可以实现延迟加载。资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。
2、实现图片懒加载，并且显示数组中，始终只有3张图片，上下滑动增加的同时，删除最开始的那一张。可以指定从总图片的第几张开始加载 。要实现上下滑动时的动画效果，我这里用到是uni-app自带swiper组件。
3、不过如果只是实现数据懒加载，我们不需要直接去调用该方法，只要覆写它并实现控制数据加载的逻辑就可以了。这里我参考了一种比较简便的做法，原文来自 尹star 的 ViewPager+Fragment LazyLoad 最优解 。-js图片的懒加载
4、页面加载来自网络的图片时，可能会花费大量的时间，因此如果使用懒加载，能够让用户体验不到加载的过程 至此，我们便可以在页面中使用懒加载来优化用户体验了。
JS图片懒加载——前端性能优化
当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。
yahoo军规把大部分的前端优化都提到了，而在js优化这一块如果有兴趣的额，推荐大家去看《 高性能javascript 》，书里讲的非常详细。
图片懒加载的原理就是暂时不设置图片的 src 属性，而是将图片的 url 隐藏起来，比如先写在 data-src 里面，等当前图片是否到了可视区域再将图片真实的 url 放进 src 属性里面，从而实现图片的延迟加载。-js图片的懒加载
简单来说就是在页面渲染过程中，图片不会一次性全部加载，会在需要的时候加载，比如当滚动条滚动到某一个位置时触发事件加载图片，通过js将img标签的data-src属性赋值给src属性。
如何用JS实现图片懒加载
1、页面加载来自网络的图片时，可能会花费大量的时间，因此如果使用懒加载，能够让用户体验不到加载的过程 至此，我们便可以在页面中使用懒加载来优化用户体验了。
2、预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中，这对图片画廊及图片占据很大比例的网站来说十分有利，它保证了图片快速、无缝地发布，也可帮助用户在浏览网站内容时获得更好的用户体验。
3、如果使用的是jquery.min.js框架，就引入jquery.lazyLoad.min.js，这里不赘述了。
4、当载入页面时，先把可视区域内的img标签的data-src属性值负给src，然后监听滚动事件，把用户即将看到的图片加载。这样便实现了懒加载。
5、图片懒加载有两种方式可以实现，一是绑定 srcoll 事件进行监听，二是使用 IntersectionObserver 判断图片是否到了可视区域，但是有浏览器兼容性问题。
6、它适用于图片很多，页面很长的电商网站的场景。
