为什么要使用懒加载而不直接加载?
当然没规定一定要懒加载,肯定是根据实际情况来决定使用的与否。
当你一个页面有庞大的数据需要请求加载(比如花瓣、Pixiv等网站),你如果一次请求,先不说你要多久才能请求完整个页面,你有那么多流量吗?什么,你还不是无限流量,那你可以把自己卖给移动、电信、联通了。
使用懒加载加载图片有什么好处呢?
1 增强用户体验
2 优化代码
3减少http的请求
4减少服务器端压力
5服务器的按需加载
看到一个api很厉害,我们判断懒加载的执行一般是滚动条是否到底,或者浏览器的可视区,
IntersectionObserver
监视某个页面元素是否进入了可见窗口
这个api很厉害:(可见该博主的博客)
https://www.cnblogs.com/xupeiyu/p/5985652.html
当然,今天我只是简单的用jquery封装一个懒加载插件,不足之处请多多指教
function lazyLoad() {
//当前窗口的高度
var windowHeight = $(window).height();
// 文档(document)的高
var bodyHeight = $(document).height();
//没有滚动条的情况下(图片不满屏),直接加载
if(bodyHeight <= windowHeight){
$('.lazyImg').each(function () {
var that = $(this);
//
if(that.attr('data-src')!=that.attr("src")){
//所需地址存在