JS基础 | 实现懒加载

1、懒加载的概念

        只在数据或内容即将进入视口或即将需要的时候才加载。

2、实现懒加载的好处

        （1）提高页面加载速度和响应速度。只加载当前用户需要或将要浏览到的数据，避免一次性加载大量不必要的数据。

        （2）节省用户流量。只加载用户浏览到的数据，避免加载用户未浏览的数据，特别是对于移动端用户来说可以节省流量。

        （3）优化用户体验。避免一次性加载大量数据导致页面卡顿，样式渲染跳跃等影响用户体验的问题。

3、实现懒加载的弊端

        （1）首屏加载会较慢，而一些关键数据又需要首屏加载，需要权衡。

        （2）需要监听浏览器事件并判断元素是否进入视口，稍微增加了开发难度。

        （3）如果数据较多，需要加载的内容较长，用户体验还是会受到影响。懒加载并非银弹，还需要结合其他优化手段。

        （4）不利于 SEO。搜索引擎爬虫抓取不到实际内容，抓取到的可能是 loading 占位图等，影响网页Indexed和排名。

        所以，懒加载是一种非常 useful 的技术，可以极大提高用户体验和网页性能，但也有一定的弊端，需要权衡选择。一般来说，对于加载的数据较多，页面性能和流量较为关注的场景，懒加载是一个不错的方案。但如果对 SEO 优化要求较高，或者加载的数据较少，也可以不使用懒加载。

4、实现图片懒加载的步骤

        （1）为图片添加默认的 loading 图片源和真实的 data-src 属性

<img src="loading.gif" data-src="real-img.jpg" />

        （2）获取所有图片元素

const images = document.querySelectorAll('img');

        （3）监听页面滚动事件

window.addEventListener('scroll', loadImages);

        （4）定义 loadImages 函数来加载图片

function loadImages() {
  for (let i = 0; i < images.length; i++) {
    // 获取图片源和位置信息
    let imgSrc = images[i].dataset.src;
    let imgRect = images[i].getBoundingClientRect();
    
    if (imgRect.top < window.innerHeight && imgRect.left < window.innerWidth
     && imgRect.right > 0 && imgRect.bottom > 0) {  
      // 图片进入视口,加载真实图片源
      images[i].src = imgSrc;  
      images[i].addEventListener('load', () => { 
        images[i].style.opacity = 1;  // 淡入效果
      });
    } 
  }
}

        （5）页面初始化时调用一次 loadImages，防止某些图片已进入视口但未加载

loadImages();

        （6）为避免加载较大图片导致页面卡顿，可以考虑在图片加载完成后设置淡入效果

images[i].addEventListener('load', () => { 
  images[i].style.opacity = 1;  
});

5、实现列表懒加载

// 定义页码和加载条数
const pageSize = 10;   
let currentPage = 1;  

// list 代表拥有滚动条的元素, 看你代码如何定义，可以是网页窗口 window、div元素、ul列表等等
// 需要先获取list 元素，再监听列表中的元素进入视口事件,判断元素位置并加载数据
list.addEventListener('scroll', () => {
  Array.from(list.children).forEach(elem => {
    let top = elem.offsetTop;
    let height = elem.clientHeight;
    if (top > 0 && top < window.innerHeight) {  
      // 元素进入视口,加载数据
      fetchData(currentPage);
      currentPage++;
    }
  });
}); 
定义 fetchData() 方法根据页码加载数据,并更新元素内容:
function fetchData(page) {
  // 发起请求,加载第page页的数据，此处省略调用接口的代码，根据自己代码结构加入即可
  ...
  ...
  // 更新列表中符合页码的元素内容
  Array.from(list.children).forEach(elem => {
    if (elem.dataset.page === page) {  
      elem.innerHTML = ... // 加载的数据内容
    }
  });
} 
// 初始化加载第一页数据,并为每个列表元素添加 data-page 属性:
fetchData(1);
Array.from(list.children).forEach((elem, index) => {
  elem.dataset.page = index % 10 + 1;  // 每10个元素为一页
});

6、实现列表滚动加载

// 1. 定义页面大小、每页加载条数和当前页码:
const pageSize = 10;     // 每页10条数据 
const listHeight = 400;  // 比如列表容器高度400px 
let currentPage = 1;     // 当前页码
let scrollTop = 0;  // 上一次滚动条位置 

//  2. 绑定滚动事件,判断滚动方向并加载数据:
list.addEventListener('scroll', () => {
  let scrollHeight = list.scrollHeight;  // 滚动内容高度
  let clientHeight = list.clientHeight;  // 视口高度
  let scrollDirection = scrollTop - list.scrollTop; 
  // 向下滚动
  if (scrollDirection > 0 && scrollHeight - clientHeight - list.scrollTop <= pageSize * 3) {
    // 滚动到底部,加载下一页
    currentPage++;
    fetchData(currentPage); 
  } 
  
  // 向上滚动 
  if (scrollDirection < 0 && list.scrollTop <= pageSize * 3) {
    // 滚动到顶部,加载上一页
    currentPage--; 
    fetchData(currentPage);
  }
  
  scrollTop = list.scrollTop;  // 更新滚动条位置
}); 
// 定义 fetchData() 方法,根据页码加载数据:
function fetchData(page) {
  // 发起请求,加载第page页的数据
  ...
  
  // 将新加载的数据添加到列表尾部
  list.append(...); 
}
// 初始化获取第一页数据
fetchData(1)

7、实现路由懒加载

        为给客户更好的客户体验，首屏组件加载速度更快一些，解决白屏问题。

        （1）ES6推荐方式imprort ()

const HelloWorld = () => import('需要加载的模块地址')

        （2）vue异步组件实现路由懒加载

component：resolve => (['需要加载的路由的地址', resolve])

        （3）webpack提供的require.ensure()实现懒加载

import Vue from 'vue';
import Router from 'vue-router';
Vue.use('Router')
export default new Router({
    routes:[{
        {
            path:'./',
            name:'HelloWorld',
            component: r => require.ensure([], () => r(require('@/components/home')), 'demo')
        }
    }]
})