在聊图片懒加载之前，我们得先对图片懒加载有个基本的概念。那什么是图片懒加载呢？举个例子：当你打开一个网页搜索一些你需要的图片时，你会看到这个网页上有许多图片，随着你滚动页面，你会发现网页里面的图片并不是一次性加载出来的。因为随着页面的滚动，新出现在可视区域的图片，有一个由加载状态或白屏状态变为图片的过程。而我们称这一个过程为图片懒加载。
为什么会有图片懒加载呢？举例来说：一个页面上有很多图片，但是首屏出现的图片大概就四五张，这个时候我们如果一次性将所有图片都加载出来的话，一张图片对应一条浏览器请求，那么图片过多将会导致浏览器繁忙，影响页面渲染速度。而使用图片懒加载呢？可以缓解浏览器压力，把一次性压力变为分段压力，增加用户体验。
好啦，到现在我们已经基本了解图片懒加载的概念和作用了。那是时候好好聊一聊图片懒加载的思路了，其实一句话就可以概括：将页面里所有img的src属性用以data-xx开头的自定义属性代替，当页面滚动到img出现在可视区域时，操作js将该img缓存在data-xx里的图片地址赋给src。
（注意：date-xx指向的是图片真正的地址，但是data-xx这个标签只具体缓存效果、没有实际作用。）
如何实现图片懒加载的效果呢？我们可以来具体分析图片懒加载的思路，显而易见，可以从两方面入手。
（1）判断图片是否出现在用户视野？
（2）若出现在用户视野，如何加载图片？
首先，我们先来解决第二个问题。加载图片，只需要用JS操作图片的src属性，将data-xx里图片的真实地址放到图片的src里面，这样就将图片加载好了。看，是不是很容易呀！
接下来，我们来解决第一个问题，为了更好的理解，我们先来了解下几个基本的宽高。
转载请注明出处
从图片中可以看出，如果$(node).offset().top >= $(window).height() + $(window).scrolltop(),那么图片没有出现在用户视野，反之则出现在用户视野。
解决了以上两个问题后，大家大概知道怎么使用图片懒加载了吗?还有小疑惑的话，可以点击下面的链接哈！同时链接里面还有很多细节的补充，欢迎来戳！
源码:https://github.com/5Iris5/Demo/blob/master/lazyLoad.html
demo预览:https://5iris5.github.io/Demo/lazyLoad.html
- 转载请注明出处
网友评论