无意中看到了这篇关于使用LQIP(Low Quality Image Placeholders) 原文链接，方案实现图片加载优化方案。在此实践一把。

1. 方案实现

  • 页面初始化时，img元素初始化时，src使用低质量的图片，显示出图片的大概轮廓
  • 页面滚动到当前图片位置，后台启动加载原图
  • 原图加载完成，替换掉之前的src显示出原图

监听页面是否滚动到图片位置使用的IntersectionObserver，减少使用scroll过程造成的页面卡顿。

2. 代码结构

index.tmpl

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <title>lasyload and LQIP</title>

  <meta name="viewport" id="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

  <link rel="shortcut icon" href="/favicon.ico">

  <meta name="apple-mobile-web-app-capable" content="yes">

  <meta name="apple-mobile-web-app-status-bar-style" content="black">

  <meta name="format-detection" content="telephone=no">

</head>

<body>

  <p>You may need to install go and Primitive</p>

  <p>

    This is long article.

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <img src="./images/1.jpg" class="big-pic" alt="">

    <br/><br/><br/>

    next line

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <img src="./images/2.jpg" class="big-pic" alt="">

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    3th picture

    <br/>

    <br/>

    <img src="./images/3.jpg" class="big-pic" alt="">

  </p>

  <script type='text/javascript' src='./bundle.js'></script>

</body>

</html>

lib/index.js

function replaceSrc (changes) {

  changes.forEach(change => {

    if (change.intersectionRatio <= 0) return

    let item = change.target

    let src = item.getAttribute('data-src')

    let img = new Image()

    img.onload = function () {

      item.setAttribute('src', src)

    }

    img.src = src

    // observer.unobserve(item)

  })

}

module.exports = function (selector) {

  let els = document.querySelectorAll(selector)

  let observer = new IntersectionObserver(replaceSrc.bind());

  [].forEach.call(els, (item) => {

    observer.observe(item)

  })

}

index.js

let dealPic = require('../lib/index')

dealPic('.big-pic')

各文件关系是：

  • index.tmpl是HTML模板，编译之后生成index.html
  • lib/index.js 用于监听元素是否达到了页面位置
  • index.js用于生成bundle.js

3. 构建的实现

首先需要安装go和primitive. primitive库： https://github.com/fogleman/primitive

安装primitive时有些网站被墙了，所以要下载安装包安装。网上搜索到了一个第三方下载地址：https://www.golangtc.com/download/package

按提示下载解压至go目录下的src，然后执行

 go install github.com/fogleman/primitive

安装完成环境。

安装npm库依赖包：

npm i glob sqip browserify

使用glob检索所有的图片，sqip用于转换图片为最小格式的svg，browserify为了使用require模块。

使用正则检测出html模板中所有的img, 匹配已经转为svg的文件，文件相同，使用base64格式替换掉原src，新加data-src为原src, 设置width height等。最后输出文件为index.html

构建的代码如下：

const sqip = require('sqip')

const glob = require('glob')

const path = require('path')

const fs = require('fs')

function getSvgList (folder) {

  return new Promise((resolve, reject) => {

    glob(folder + '/**/*.jpg', {}, function (err, files) {

      if (err) {

        reject(err)

      }

      let list = []

      files.forEach(file => {

        const result = sqip({

          filename: file,

          numberOfPrimitives: 10,

        })

        list.push({

          file: path.join(__dirname, file),

          result,

        })

      })

      resolve(list)

    })

  })

}

function replaceHtml (html, list) {

  if (!path.isAbsolute(html)) {

    html = path.join(__dirname, html)

  }

  let str = fs.readFileSync(html, 'utf-8')

  let htmlPath = path.dirname(html)

  const REG = /(<img .*?src=\")(.*?)\"( .*?>)/g

  let imgSrc = REG.exec(str)

  while (imgSrc) {

    let src = imgSrc[2]

    let file

    if (path.isAbsolute(src)) {

      file = path.join(__dirname, src)

    } else {

      file = path.join(htmlPath, src)

    }

    list.forEach(item => {

      if (item.file === file) {

        var imgInfo = item.result.img_dimensions

        str = str.replace(imgSrc[0], function (str) {

          return imgSrc[1] + 'data:image/svg+xml;base64,' + item.result.svg_base64encoded + `" data-width="${imgInfo.width}" data-height="${imgInfo.height}"`

            + ` data-src="${src}"` + imgSrc[3]

        })

      }

    })

    imgSrc = REG.exec(str)

  }

  fs.writeFileSync('./example/index.html', str)

}

getSvgList('./example/images/')

  .then(list => {

    replaceHtml('./example/index.tmpl', list)

  })

4. 执行构建并检测结果

在npm中加入scripts：

{

    "build": "npm run sqip & browserify example/index.js -o example/bundle.js",

    "sqip": "node sqip.js"

}

执行build后，example文件目录下会生成index.html。开启web服务器(我是使用的自己写的xmocker)，访问example/index.html，使用throttle进行查看效果。

5. 总结

方案只是针对普通Html，对于其他模块，应该有现成的方案。访问体验确实好了很多。

附：代码地址 https://github.com/wenlonghuo/code-test/tree/master/001_lasyload

lasy load图片的实现的更多相关文章

  1. Lazy Load 图片延迟加载(转)

    jQuery Lazy Load 图片延迟加载来源 基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. ...

  2. jQuery Lazy Load 图片延迟加载

    基于 jQuery 的图片延迟加载插件,在用户滚动页面到图片之后才进行加载. 对于有较多的图片的网页,使用图片延迟加载,能有效的提高页面加载速度. 版本: jQuery v1.4.4+ jQuery ...

  3. jQuery Lazy Load图片懒加载

    传送门:官网地址,jQuery Lazy Load v1.7.2下载,Github 使用方法: 1.引用js文件 <script src="jquery.js">< ...

  4. lazy load 图片延迟加载 跟随滚动条

    http://plugins.jquery.com/lazyload/ Jquery.LazyLoad.js插件参数详解: 1,用图片提前占位 placeholder : "img/grey ...

  5. img前置显示屏装load图片

    只需要设置img的background能够 <img src="" alt="" class="detailImg"  > cs ...

  6. imagepool前端图片加载管理器(JavaScript图片连接池)

    前言 imagepool是一款管理图片加载的JS工具,通过imagepool可以控制图片并发加载个数. 对于图片加载,最原始的方式就是直接写个img标签,比如:<img src="图片 ...

  7. Android 三大图片加载框架的对比——ImageLoader,Picasso,Glide

    一.ImageLaoder介绍 << Universal ImageLoader 是很早开源的图片缓存,在早期被很多应用使用 多线程下载图片,图片可以来源于网络,文件系统,项目文件夹ass ...

  8. MVC显示Base64图片

    本篇演示ASP.NET MVC应用程序,显示Base64图片. Insus.NET浏览网页,发现一个站点http://www.base64-image.de/ 想起以前也有实现过<如何把数据流转 ...

  9. CImage 获取图片RGB 、图片高和宽；

    1 CImage img , img1 ,imDest; 2 img1.Load( 图片路径); 3 img.Load( 图片路径); 4 为了防止图片失真,先处理一下在把图片显示出来 5 SetSt ...

随机推荐

  1. Oracle问题之字符集问题,登陆sqlplus出现问号

    退出sql SET NLS_LANG=AMERICAN_AMERICA.ZHS16GBK show parameter nls_la

  2. 关于多台机器之前session共享，sessionState mode="StateServer" 问题的困扰

    .net 多台机器共享session是很老的技术,一直很少用到session. 最近就出现了一个问题:三台前端,其中一台保存的session值死活不对,一样的环境,一样的配置文件,就是和另外两台获得的 ...

  3. MySQL的char和varchar针对空格的处理

    MySQL的char和varchar存储和查询中包含空格的实验 MySQL版本 一.测试char包含空格的存储和查询 测试发现,存储的数据,char数据类型的右侧空格存储的时候被删除了,但是左侧空格还 ...

  4. intellij springmvc的配置文件报错

    报错: Checks references injected by IntelliLang plugin. Cannot resolve bean  解决: File--Settings[或直接CTR ...

  5. linkin大话面向对象--枚举

    枚举类(enum) 其实我们使用到枚举的地方还是很多的,其实我们可以完全人工的来实现枚举的功能.比如说我现在手里的项目我就是自己实现的枚举,说白了,枚举就是一个类的多例模式. 1,使用enum声明,默 ...

  6. awk -f program.file 功能使用

    一.awk -f program.file 功能使用 一直没有使用过awk的-f功能,感觉鸡肋,不是很实用,更多的是因为没有需求的原因 下面介绍下awk -f的使用方法 awk可以指定默认的文件路径, ...

  7. .NET 异步多线程，Thread，ThreadPool，Task，Parallel,异常处理，线程取消

    今天记录一下异步多线程的进阶历史,以及简单的使用方法 主要还是以Task,Parallel为主,毕竟用的比较多的现在就是这些了,再往前去的,除非是老项目,不然真的应该是挺少了,大概有个概念,就当了解一 ...

  8. Linux面试题(1)

    一．填空题: 1. 在Linux系统中,以 文件 方式访问设备 . 2. Linux内核引导时,从文件 /etc/fstab 中读取要加载的文件系统. 3. Linux文件系统中每个文件用 i节点 来 ...

  9. JAVA中的数据存储空间简述

    在 JAVA 中,有六个不同的地方可以存储数据: 1. 寄存器( register ): 最快的存储区,因为它位于不同于其他存储区——处理器内部.但是寄存器的数量极其有限,所以寄存器由编译器根据需求进 ...

  10. ext4 关闭延迟分配

    ext4的延迟分配特性(delalloc)保证文件在磁盘中的连续,提高文件的读写性能,但是却增加了丢数据的概率. Hadoop和HBase中建议将延迟分配特性关闭. 可以使用下面的方法关闭延迟分配 1 ...