[回炉计划]-实现一个图片预加载

栏目: JavaScript · 发布时间: 6年前

内容简介：一般来说，影响一个网站加载时间的最大因素就是图片资源过多。一般的网页大小只有几十 k，而图片资源往往可能达到几 M。有关于图片加载机制的可以看懒加载：顾名思义就是延迟加载的意思。当图片在窗口不可见的范围内不加载，滚动到可视区域之后再进行加载。

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

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

原理

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

实现

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

  <body>
    <img
      src="default.jpg"
      data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_03a01c0a88689b4ae15d2456fb74fffd.jpg"
      alt=""
    />
    <img
      src="default.jpg"
      data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_03a01c0a88689b4ae15d2456fb74fffd.jpg"
      alt=""
    />
    <img
      src="default.jpg"
      data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_190e75a5997b2e58925b38eea9bb31b1.jpg"
      alt=""
    />
    <img
      src="default.jpg"
      data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_27822ff96364f7e8bbfb590f6f3e2b50.jpg"
      alt=""
    />
    <img
      src="default.jpg"
      data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_2bec01f2f3765308a36335de271cdd24.jpg"
      alt=""
    />
    <img
      src="default.jpg"
      data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_31f097ecfa0a22d1d955637418bdf49d.jpg"
      alt=""
    />
    <img
      src="default.jpg"
      data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_33487cd406078f3c99391db03da71f64.jpg"
      alt=""
    />
    <img
      src="default.jpg"
      data-src="https://meizi.yitianyibu.cn/000793e9dda4959f437423adf3ed44d6_35a5d6d62c9c4c941f1d79ec36829042.jpg"
      alt=""
    />
    <img
      src="default.jpg"
      data-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 < imgsCount; i++) {
    if (imgs[i].offsetTop < seeHeight + scrollTop) {
      if (imgs[i].getAttribute("src") == "default.jpg") {
        imgs[i].src = imgs[i].getAttribute("data-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));
复制代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

算法神探

[美] 杰瑞米·库比卡 / 啊哈磊、李嘉浩 / 电子工业出版社 / 2017-2 / 65

《算法神探：一部谷歌首席工程师写的CS小说》围绕程序设计典型算法，精心编织了一个扣人心弦又趣味横生的侦探缉凶故事。小说主人公运用高超的搜索技巧和精深的算法知识，最终识破阴谋、缉拿元凶。其间，用二分搜索搜查走私船、用搜索树跟踪间谍、用深度优先搜索逃离监狱、用优先队列开锁及用最佳优先搜索追寻线索等跌宕起伏又富含算法精要的情节，让读者在愉悦的沉浸式体验中快速提升境界，加深对程序世界的理解。《算法神探：一......一起来看看《算法神探》这本书的介绍吧!

码农工具

[回炉计划]-实现一个图片预加载

原理

实现

节流优化

算法神探

HTML 压缩/解压工具

CSS 压缩/解压工具

RGB HSV 转换