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

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

内容简介：一般来说，影响一个网站加载时间的最大因素就是图片资源过多。一般的网页大小只有几十 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));
复制代码

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

查看所有标签

猜你喜欢:

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

码农书籍

首席产品官1 从新手到行家

车马 / 机械工业出版社 / 2018-9-25 / 79

《首席产品官》共2册，旨在为产品新人成长为产品行家，产品白领成长为产品金领，最后成长为首席产品官（CPO）提供产品认知、能力体系、成长方法三个维度的全方位指导。作者在互联网领域从业近20年，是中国早期的互联网产品经理，曾是周鸿祎旗下“3721”的产品经理，担任CPO和CEO多年。作者将自己多年来的产品经验体系化，锤炼出了“产品人的能力杠铃模型”（简称“杠铃模型”），简洁、直观、兼容性好、实......一起来看看《首席产品官1 从新手到行家》这本书的介绍吧!

码农工具

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

原理

实现

节流优化

首席产品官1 从新手到行家

SHA 加密

XML、JSON 在线转换

HEX CMYK 转换工具