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

栏目: 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));
复制代码

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

查看所有标签

猜你喜欢:

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

码农书籍

Types and Programming Languages

Benjamin C. Pierce / The MIT Press / 2002-2-1 / USD 95.00

A type system is a syntactic method for automatically checking the absence of certain erroneous behaviors by classifying program phrases according to the kinds of values they compute. The study of typ......一起来看看《Types and Programming Languages》这本书的介绍吧!

码农工具

Markdown 在线编辑器

RGB HSV 转换

RGB HSV 互转工具