文章目录

前言
一、懒加载
二、预加载
总结

前言

懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，从而减轻服务器压力，避免用户等待时间过长（一般在网站图片很多的时候使用，比如淘宝，京东等）

预加载则是在进入页面后提前加载图片等资源，等用户用到该图片或者资源时可以直接从本地缓存渲染，达到无缝加载，增加用户体验

一、懒加载

body部分代码

<body>
  <div class="box">
    <img class="lazy-load" data-src="./images/001.jpg" />
    <img class="lazy-load" data-src="./images/002.jpg" />
    <img class="lazy-load" data-src="./images/003.jpg" />
    <img class="lazy-load" data-src="./images/004.jpg" />
  </div>
</body>

js代码

  var imgs = document.getElementsByClassName('lazy-load');
  lazyLoad(imgs);
  window.onscroll =function(){
    lazyLoad(imgs);
  }



function lazyLoad(imgs){
  // 获取可视区的高度
  var height = document.documentElement.clientHeight;
  // 获取滚动条的位置
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  // 遍历图片
  for(var i=0;i<imgs.length;i++){
    if(imgs[i].offsetTop < height + scrollTop){
      if(imgs[i].getAttribute('src') == '' || !imgs[i].getAttribute('src')){
        imgs[i].src = imgs[i].getAttribute('data-src')
      }
    }
  }
}

二、预加载

body部分代码

<body>
  <div class="box">
    <div id="preload1"></div>
    <div id="preload2"></div>
    <div id="preload3"></div>
    <div id="preload4"></div>
  </div>
</body>

1）使用css和JavaScript预加载

  // 将加载图片封装到一个函数中
  function preloader(){
    if(document.getElementById){
      document.getElementById('preload1').style.background = 'url(./images/001.jpg) no-repeat -9999px -9999px'
      document.getElementById('preload2').style.background = 'url(./images/002.jpg) no-repeat -9999px -9999px'
      document.getElementById('preload3').style.background = 'url(./images/003.jpg) no-repeat -9999px -9999px'
      document.getElementById('preload4').style.background = 'url(./images/004.jpg) no-repeat -9999px -9999px'
    }
  }
  
  // 监听页面是否加载完成，只能加载完成后才执行预加载否则预加载内容过大会让用户等待，体验效果差
  function addLoadEvent(fn){
    var load = window.onload;
    if(typeof window.load == 'function'){
      window.onload = fn
    }else{
      window.onload = function(){
        if(load){
          load()
        }
        fn();
      }
    }
  }

  addLoadEvent(preloader)

2）使用JavaScript预加载

 // 预加载图片
  function preloader(){       //定义一个函数
    if(document.images){  
      var img1 = new Image().src = './images/001.jpg';
      var img2 = new Image().src = './images/002.jpg';
      var img3 = new Image().src = './images/003.jpg';
      var img4 = new Image().src = './images/004.jpg';
    }
  }
  
  // 监听页面是否加载完成，只能加载完成后才执行预加载否则预加载内容过大会让用户等待，体验效果差
  function addLoadEvent(fn){
    var load = window.onload;
    if(typeof window.load == 'function'){
      window.onload = fn
    }else{
      window.onload = function(){
        if(load){
          load()
        }
        fn();
      }
    }
  }

  addLoadEvent(preloader)

3）使用Ajax预加载

  onload = function(){
    var xhr1 = null;
    setTimeout(function(){
      // 实例化请求对象
      xhr1 = new XMLHttpRequest();
      // 创建请求
      xhr1.open('请求方式（get/post）','文件路径',异步or同步);   //true 表示异步请求  false表示同步请求
      // 向后台发送请求
      xhr1.send();
    },10000) // 使用定时器的目的：避免请求的时间过长
  }

总结

懒加载和预加载都是为了优化用户体验，优点是可以减轻服务器压力。缺点就是网速不好的情况下用户体验会比较差。

预加载有三种方式，css和JavaScript加载如果某一张图片过大会导致后边加载不出来，在前端可能就会渲染不出来。所以比较推荐使用JAvaScript实现预加载。

预加载在网页相对较小的情况下预加载可以让用户无缝打开对应图片视频等资源大大提升用户体验。同时也会增加服务器前端压力

原文链接：https://blog.csdn.net/weixin_53950583/article/details/124113006