《前端之路》之前端图片类型 & 优化 & 预加载 & 懒加载 & 骨架屏

前端图片类型 & 优化 & 预加载 & 懒加载 & 骨架屏

前端图片类型 & 优化 & 预加载 & 懒加载 & 骨架屏

这是一篇关于在前端开发中 与图片相关的一些常见问题，回想一下，我们在日常的开发过程中前端与图片打交道的次数可以说是比所有开发职位都要多吧。特别是在 nodeJs 盛行以后。

从我们最开始学习前端的那一天，我们是不是认识了 一个叫 <img /> 的 标签，这个标签的 src 属性可以引用对应路径的图片，然后手动刷新页面，我们的图片就显示在了页面上了， 哇～ 大学的教师里大家都不约而同的发出了哇的声音，回想起来还是历历在目啊～

那么 从业前端 这个岗位也这么多年了，总结一下在前端中与图片打交道的一些经验或者总结吧

一、前端图片的类型

jpg、png、gif、base64、字体图标。貌似日常开发中，我们常常会用到的就说这些了。

那我们来纵向的来统计一下图片的类型 和 这些类型的图片在不同场景下有哪些优缺点。

（ 因为本身对于图片的理解度还是不够的，所以询问了公司的 UI设计师的小姐姐们来帮忙答疑解惑 ）

1.1、矢量图和位图

先上和UI部门的小姐姐的聊天～

其实我觉得 小姐姐的回答 可以说是非常容易懂了

矢量图： 一般来说矢量图表示的是几何图形，文件相对较小，并且放大缩小不会失真。

用途：SVG，图标字体font-awesome

位图： 位图又叫像素图或栅格图，它是通过记录图像中每一个点的颜色、深度、透明度等信息来存储和显示图像。放大会失真（变模糊）

用途：png,gif,jpg,canvas

1.2、有损压缩和无损压缩

有损压缩是对图像数据进行处理，去掉那些图像上会被人眼忽略的细节，然后使用附件的颜色通过渐变或其他形式进行填充。适用于: JPG。从字面意义上理解就是对图片会有一定的损伤。像素的损伤，从而压缩了图片的体积。
无损压缩是先判断图像上哪些区域的颜色是相同的，哪些是不同的，然后把这些相同的数据信息进行压缩记录，而把不同的数据另外保存。适用于: PNG。对于图片的压缩也会造成一定的损伤，但是相对有限。
看完上面的对比，仿佛发现了上帝是公平的 开了一扇门，也关上了一扇窗。

1.3、透明度

索引透明

即布尔透明，类似于GIF，某一个像素只有全透和全不透明两者效果，不能对透明度进行设置。
Alpha透明

半透明，可以设置 0～100 的透明度。

1.4、常用图片格式

JPN 、PNG、 GIF

1.5、新图片格式 - WebP

出自于谷歌，是一种支持有损压缩和无损压缩的图片文件格式，派生自图像编码格式VP8。

具有更优的图像数据压缩算法，能带来更小的图片体积，而且拥有肉眼识别无差异的图像质量。

具备了无损和有损的压缩模式

支持Alpha透明以及动画的特性

在JPEG和PNG的转化效果都非常优秀，稳定和统一。

1.6、Base64 图片格式

如何生成 Base64 格式的图片

var reader = new FileReader(),htmlImage;
reader.onload = function(e){
    //e.target.result 就是base64编码
    htmlImage = '<img src="' + e.target.result + '"/>';
}
reader.readAsDataURL(file);

优缺点：

优点
减少HTTP请求
没有图片更新要重新上传，清理缓存的问

缺点
增加了CSS文件的尺寸
编码成本

二、前端中图片相关的优化处理

2.1 经常会用到的方法：

图片大小与展示区一致（图片大小合适不过多浪费下载资源）
GIF转为PNG8 （减少gif 体积）
缩略图（大图片，先加载一张缩略图）（避免页面中图片的位置出现长时间的空白，影响用户体验）

三、预加载

3.1、原理

 通过CSS或者JavaScript，先请求图片到本地，再利用浏览器的缓存机制，当要使用图片时（图片路径一致），浏览器直接从本地缓存获取到图片，加快图片的加载速度。

3.2、场景

背景，幻灯片，相册等，将要展示的前一张和后一张优先下载

3.3、优缺点

如果都在首页进行预加载肯定会加长首页加载时间，首屏加载变慢，影响体验。
但是在 http2 来临的时候这个问题，应该可以很有效的进行一个解决。

3.4、实现方法

CSS

#preload{ backgroud: url(./01.png) no-repeat -9999px -9999px;}

使用这个方法加载图片会同页面的其他内容一起加载，增加了页面的整体加载时间

JS


let img = document.createElement('img')
img.src = './02.png'

let img = new Image()
img.src = './01.png'

// 但是这种方法是无法添加的 DOM 树中去的。

四、懒加载

4.1、原理

当要使用到图片时，再加载图片，而不是一下子加载完所有的图片的方式，来提高页面其他图片的加载速度。

4.2、场景

当前页面的图片数量过多，且页面长度很长。

4.3、JS 实现

思路很简单，一般都是在页面上添加一个滚动条事件，判断图片位置与浏览器顶部的距离是否小于（可视高度+滚动距离），如果小于则优先加载。

下面我们就基于 react 来进行懒加载的实现。

或者可以查看 github 地址：

github传送门

代码如下:

    componentDidMount() {

        const lazyload = (options) => {
            // 获取图片外部dom
            let doc = options.id ? document.getElementById(options.id) : document
            if (doc === null) return
            // 获取当前dom 内，所有的图片标签
            let tmp = doc.getElementsByTagName('img')
            let tmplen = tmp.length
            let imgobj = []

            // 判断当前 元素是否到了应该显示的 位置
            const isLoad = (ele) => {
                let scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop
                if (typeof ele === 'undefined') return false
                let edit = ~~ele.getAttribute('data-range') || options.lazyRange
                let clientHeight = scrollTop + document.documentElement.clientHeight + edit
                let offsetTop = 0
    
                while (ele.tagName.toUpperCase() !== 'BODY') {
                    offsetTop += ele.offsetTop
                    ele = ele.offsetParent
                }
                return (clientHeight > offsetTop)
            }

            // 给已经到了可以显示图片位置的 img 标签添加 src 值
            const setimg = (ele) => {
                ele.src = ele.getAttribute('data-src')
            }

            // 遍历当前 dom 内所有要显示的 img 标签
            for (let i = 0; i < tmplen; i++) {
                var _tmpobj = tmp[i]
                if (_tmpobj.getAttribute('data-src') !== null) {
                    if (isLoad(_tmpobj)) {
                        setimg(_tmpobj)
                    } else {
                        imgobj.push(_tmpobj)
                    }
                }
            }

            // 滚动的时候动态 判断当前 元素的是否 可以赋值
            let len = imgobj.length
            const handler = () => {
                for (let i = 0, end = len; i < end; i++) {
                    let obj = imgobj[i]
                    if (isLoad(obj)) {
                        _setimg(obj)
                        imgobj.splice(i, 1)
                        len--
                        if (len === 0) {
                            loadstop()
                        }
                    }
                }
            }
    
            // 根据上下文要求动态低进行 图片 src 赋值
            const _setimg = (ele) => {
                if (options.lazyTime) {
                    setTimeout(function () {
                        setimg(ele)
                    },
                    options.lazyTime + ~~ele.getAttribute('data-time'))
                } else {
                    setimg(ele)
                }
            }
            
            // 去除 滚动事件监听
            const loadstop = () => {
                window.removeEventListener ? window.removeEventListener('scroll', handler, false) : window.detachEvent('onscroll', handler)
            }
    
            loadstop()
            // 添加滚动事件监听
            window.addEventListener ? window.addEventListener('scroll', handler, false) : window.attachEvent('onscroll', handler)
        }

        lazyload({
            id: 'imgs',
            lazyTime: 200,
            lazyRange: 100
        })
    }

在以上的基础上，其实可以进行很好的 组件化 的操作。是一个很好的面向对象的一个 JS 代码的实现的例子。后面的文章当中。我们也会加大 JS 中 OOP 相关文章的篇幅，敬请期待～

五、骨架屏（首屏加载优化）

今天终于要讲到我们的主角了， 骨架屏。终于不是首页进去就是加载一个 菊花了，让你成为 菊外人了。而是一个科技感满满的的 骨架屏 。好了，话不多说，开始今天的讨论吧！

5.1、原理

5.2、场景

5.3、JS实现

5.4、优缺点

不知不觉已经下班了，周五了，就先回家，争取晚上再完善跟新一下～

Github传送门，欢迎 Star - -

Github地址，欢迎 Star