当前位置： 移动技术网 > IT编程>开发语言>JavaScript > 快乐前端-图片预加载

快乐前端-图片预加载

2019年03月11日  | 移动技术网IT编程  | 我要评论

前言

正所谓金三银四五吃土，因此这些天几个前端技术群讨论最多的话题就是面试题了。某日群内讨论一道面试题：“前端如何实现大量图片预加载以及预加载进度动画进度条显示？”

恰巧本人以前jquery、zepto一把梭快乐切图的时候，写过不少形式的图片预加载动画。对于图片预加载的原理稍微了解接触过那么一点点，这里献丑一番简单写一个预加载案例，作为19年第一篇博（段）客（子）快乐一哈。

你离挨打只差一点点.png

一、利用image对象搞事情

既然是利用image对象搞事情，那肯定少不了大量的img图片。因此我从名字中包含刺激二字的网站上面扒了不少各位带妹司机热血沸腾的图片，没错就是腾讯刺激战场--各种武器图片。

武器截图.png

emmm，不皮了。我们直接进入主题内容，javascript当中的image对象。关于image对象的介绍mdn上面写的, 当new image()的时候会生成一个htmlimageelement.

image对象执行.png

htmlimageelement这是什么？和我们熟悉的htmlelement这个节点有什么不同呢？顺着上面的链接提示，我们继续顺藤摸瓜，最后发现htmlimageelement 属于htmlelement孩子。

htmlimageelement.png

既然继承了htmlelement特性，同理body元素有一个onload属性，那么同理new image得到对象也同样拥有onload属性。

那么就让我们利用，new image()来搞事情

二、预加载和预加载动画实现

1、批量设置图片路径

平常我们在接触img元素的时候，都知道书写img标签的时候，必然少不了添加src属性，不然图片加载不出来。所以我们第一步就是批量设置这些需要预加载的图片路径地址，这样onload才能发挥其作用。

这里的图片太多了，一张一张的手写，未免太麻烦了。为了节省时间，这里我拿出一年多以前刚刚学node的时候写的一个js脚本，来批量获取图片名称生成数组对象列表。

node生成的数组.png

ps：这里就不挂载nodefs脚本代码，文末我将会这个小demo地址附上（包括nodefs.js），感兴趣的小伙伴可以点击访问。

2、预加载图片效果测试

因为我此前是用的webpack工具构建的项目，支持模块引入imglist.js. 这里我为了demo演示，因此我们就直接将这个数组对象复制粘贴到演示html当中。

<body>
    <h1 class="loading"></h1>
</body>
</html>
<script>
    let imglist = [{name: 'akm', url: 'akm.png'},{name: 'aug', url: 'aug.png'},{name: 'awm', url: 'awm.png'},{name: 'crossbow', url: 'crossbow.png'},{name: 'crowbar', url: 'crowbar.png'},{name: 'dp-28', url: 'dp-28.png'},{name: 'g36c', url: 'g36c.png'},{name: 'groza', url: 'groza.png'},{name: 'kar98k', url: 'kar98k.png'},{name: 'm16a4', url: 'm16a4.png'},{name: 'm24', url: 'm24.png'},{name: 'm249', url: 'm249.png'},{name: 'm416', url: 'm416.png'},{name: 'm762', url: 'm762.png'},{name: 'machete', url: 'machete.png'},{name: 'micro-uzi', url: 'micro-uzi.png'},{name: 'mini14', url: 'mini14.png'},{name: 'mk14', url: 'mk14.png'},{name: 'mk47', url: 'mk47.png'},{name: 'p18c', url: 'p18c.png'},{name: 'p1911', url: 'p1911.png'},{name: 'p92', url: 'p92.png'},{name: 'pan', url: 'pan.png'},{name: 'qbu', url: 'qbu.png'},{name: 'qbz', url: 'qbz.png'},{name: 'r1895', url: 'r1895.png'},{name: 'r45', url: 'r45.png'},{name: 's12k', url: 's12k.png'},{name: 's1897', url: 's1897.png'},{name: 's686', url: 's686.png'},{name: 'sawed-off', url: 'sawed-off.png'},{name: 'scar-l', url: 'scar-l.png'},{name: 'scorpion', url: 'scorpion.png'},{name: 'sickle', url: 'sickle.png'},{name: 'signal', url: 'signal.png'},{name: 'sks', url: 'sks.png'},{name: 'slr', url: 'slr.png'},{name: 'thomson', url: 'thomson.png'},{name: 'ump9', url: 'ump9.png'},{name: 'vector', url: 'vector.png'},{name: 'vss', url: 'vss.png'},{name: 'win94', url: 'win94.png'}];
    let length = imglist.length;
    let images = new array(); // 定义一个数组容器，用来存储预加载完成的图片
    let loadel = document.queryselector('.loading');
    function preload () {
        let count = 0; // 计算器，计算加载了多少图片
        for (let i = 0; i < length; i++) {
            images[i] = new image();
            images[i].src = `./imgs/${imglist[i].url}`; 
            // 谷歌浏览器高版本支持大部分es6，所以这里就不用字符串拼接了。
            images[i].onload = function () {
                count++;
                if (count === length) {
                    loadel.innerhtml = '加载完成';
                } else {
                    loadel.innerhtml = '正在加载中';
                }
            }
        }
    }
    preload();
</script>

打开页面重新刷新一下，在控制台network可以将图片全部加载出来。emmm，但是由于本地加载速度太快了，一下子就加载完成。通过下面截图可以看到，加载时间不到1s就加载，并不能很好看的预加载过程。

加载太快.png

3、预加载图片真实环境模拟

所以为了小伙伴们能够更加直观的看到预加载的过程，这里我们决定进行真实环境模拟：

①这里我利用vscode自带的插件，生成一个本地服务器。

vscode-live.png

②然后在切换到浏览器控制台下network，将网速调整为fast3g

fast3g.png

③ 然后将之前加载中的代码修改，成百分比显示。

// loadel.innerhtml = '正在加载中';
loadel.innerhtml = `正在加载中${math.round(count / length * 100)}%`;

最终效果如下：

gif-1552205242262.gif

三、小结

好了！以上就是鄙人对于前端图片预加载一点简单理解与复习了，主要回顾一些image()基本属性点。

当然，前端图片预加载方法也并不止这么一种，方法还是有好几种。所以后续使用何种方法就各位小伙伴自己了。这里有一篇大佬翻译的文章就提到三种前端预加载的方法，希望可以给大家一个参考。

这篇文章中的第二个方法，就是本文采用的方法。所以希望各位大佬待会点进看完之后，不要出来打我。毕竟我不是大佬代码水平，我只是一个快乐前端段子手。

传送门地址：译：利用css、javascript及ajax实现图片预加载的三大方法

我绝不道歉.png

考虑新年第一篇文章，吹水过多不在状态，所以良(很)心(皮)的我，决定锦上添花额外写一个快乐loading动画作为给我大哥赔罪。

快乐loading小动画

css3预加载动画.gif

这里就是百分比数字，分割成两位，然后通过数字的不同，改变图片background-position属性，来完成loading预加载动画。

 images[i].onload = function () {
    count++;
    if (count === length) {
        loadstart.style.display = 'none';
            loadend.style.display = 'block';
            loadend.onclick = function () {
                alert('恭喜学习图片预加载！');
            }
     } else {
       // loadel.innerhtml = '正在加载中';
       // loadel.innerhtml = `正在加载中${math.round(count / length * 100)}%`;
       let text = math.round(count / length * 100);
       let text1 = parseint(text / 10);
       let text2 = parseint(text % 10);
       console.log(text1, text2);
       num1.style.backgroundpositionx = `${-47 + text1 * -60}px`
       num2.style.backgroundpositionx = `${-47 + text2 * -60}px`
      }
  }

所以对完整blogdemo代码感兴趣的，可以从本人github上阅览。

源码demo传送门地址

原创文章，文笔有限，才疏学浅，文中若有不正之处，再次再次再次欢迎各位啪啪的打脸赐教。（有句话说的好，重要的词得说三遍。）

我是车大棒！我为我自己带眼了！

皮皮虾我们走.png

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网