懒加载和预加载的区别_回炉计划实现一个图片懒加载-CSDN博客

本文链接：https://blog.csdn.net/weixin_39659748/article/details/111298781

前言

一般来说，影响一个网站加载时间的最大因素就是图片资源过多。一般的网页大小只有几十 k，而图片资源往往可能达到几 M。
有关于图片加载机制的可以看 Web 图片资源的加载与渲染时机。所以对于图片很多的页面，为了加速页面加载速度，我们一般需要对图片资源进行懒加载。

懒加载：顾名思义就是延迟加载的意思。当图片在窗口不可见的范围内不加载，滚动到可视区域之后再进行加载。

原理

img 标签在没有 src 属性时是不会加载图片资源的(注:src属性只有存在就会向服务器发送请求)，这里我们还需要用到src这个属性来存储图片地址。当图片滚动到可视区域时，将src的值赋给src。当然，常用做法也可能用一张默认的图来进行占位。

实现

<html>
  <head>
    <title>懒加载title>
    <style>img {display: block;width: 300px;height: 400px;
      }style>
  head>

  <body>
    <imgsrc="default.jpg"src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_03a01c0a88689b4ae15d2456fb74fffd.jpg"alt=""
    />
    <imgsrc="default.jpg"src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_03a01c0a88689b4ae15d2456fb74fffd.jpg"alt=""
    />
    <imgsrc="default.jpg"src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_190e75a5997b2e58925b38eea9bb31b1.jpg"alt=""
    />
    <imgsrc="default.jpg"src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_27822ff96364f7e8bbfb590f6f3e2b50.jpg"alt=""
    />
    <imgsrc="default.jpg"src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_2bec01f2f3765308a36335de271cdd24.jpg"alt=""
    />
    <imgsrc="default.jpg"src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_31f097ecfa0a22d1d955637418bdf49d.jpg"alt=""
    />
    <imgsrc="default.jpg"src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_33487cd406078f3c99391db03da71f64.jpg"alt=""
    />
    <imgsrc="default.jpg"src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_35a5d6d62c9c4c941f1d79ec36829042.jpg"alt=""
    />
    <imgsrc="default.jpg"src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_5047eb73f50b0020bf88f2463e086125.jpg"alt=""
    />
  body>
html>

代码部分来源于实现图片懒加载(Lazyload)

var imgsCount = document.getElementsByTagName("img").length;
var imgs = document.getElementsByTagName("img");
var count = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历

lazyload(); //页面载入完毕加载可是区域内的图片

window.onscroll = lazyload;

function lazyload() {
  //监听页面滚动事件
  var seeHeight = document.documentElement.clientHeight; //可见区域高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
  for (var i = count; i     if (imgs[i].offsetTop       if (imgs[i].getAttribute("src") == "default.jpg") {
        imgs[i].src = imgs[i].getAttribute("src");
      }
      n = i + 1;
    }
  }
}

节流优化

从上面代码来看，lazyload函数是绑定在window.onscroll上的。当页面滚动时,lazyload会不断的调用，会非常影响浏览器性能。所以我们需要对lazyload函数做节流(throttle)

这是underscore 节流函数实现

function throttle(func, wait, options) {
  var context, args, result;
  var timeout = null;
  var previous = 0;
  if (!options) options = {};
  var later = function() {
    previous = options.leading === false ? 0 : new Date().getTime();
    timeout = null;
    result = func.apply(context, args);
    if (!timeout) context = args = null;
  };
  return function() {
    var now = new Date().getTime();
    if (!previous && options.leading === false) previous = now;
    var remaining = wait - (now - previous);
    context = this;
    args = arguments;
    if (remaining <= 0 || remaining > wait) {
      if (timeout) {
        clearTimeout(timeout);
        timeout = null;
      }
      previous = now;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    } else if (!timeout && options.trailing !== false) {
      timeout = setTimeout(later, remaining);
    }
    return result;
  };
}

结合节流函数

window.addEventListener("scroll", throttle(lazyload, 500));

参考资料

Web 图片资源的加载与渲染时机
实现图片懒加载(Lazyload)

老铁点个赞呗！