没事撸个插件玩1--预加载插件(f-preload)

nihao 发布于2019-08-21 14:36 / 797人阅读

摘要：模式用开发时记录图片的加载信息很熟悉吧下面的不知道的赶紧度娘一下吧预告下篇文章就写这个插件我已经写了差不多了是个懒加载插件具体细节先去看一吧仓库重要的事情说三遍你的支持就是动力

没事撸个插件玩--预加载插件(f-preload) 原生无依赖，预加载插件

插件名：f-preload
实现的主要功能:
1、批量预加载多个图片
2、支持debug打印加载信息
3、支持加载完执行自定义回调函数

项目github地址https://github.com/ifir/f-preload各位客官赏个star，表示很开心

如何使用

1、页面引入



var Fpreload = new Fpreload({
    source: Array,  //图片src数组(required)
    debug : Boolean,  //默认false
    callback : Function //默认null
});

or:

2、npm安装

npm install --save f-preload

var Fpreload = require("f-preload");
var preload = new Fpreload({
    source: Array,  //图片src数组(required)
    debug : Boolean,  //默认false
    callback : Function //默认null
});

原理解释：

一句话解释:利用img.src发起http请求
看看核心代码

imgloader:function(){
    var _this = this,
        img = [],
        source = _this.source,
        sucNum = _this.sucNum;
    _this.asyncNum = 0;//计数器
    for(var i = 0; i < _this.length; i++){
        //实例
        img[i] = new Image();
        //加载
        img[i].src = source[i];
        //加载完成
        img[i].onload = function(){
            _this.sucNum++;
            _this.asyncNum++;
            if(_this.sucNum == _this.length){
                if(typeof _this.callback === "function"){
                    _this.callback();
                }else{
                    console.log("Preloader Complete");
                }
            }
            //log打印
            _this.debug && _this.msglog();
        };
        //加载失败
        img[i].onerror = function(){
            _this.errNum++;
            _this.asyncNum++;
            _this.errArr.push(this.src);
            //log打印
            _this.debug && _this.msglog();
        }
    }
}

这里说明一下onload指图片加载完成,onerror不解释,还要说明一下onload是异步的,为了debug模式在所有的图片onload和onerror之后在打印加载图片的信息。还有自定义回调函数只有在所有图片都加载成功才会执行，而不是一张图片加载成功就执行。

debug模式用开发时记录图片的加载信息

console.log很熟悉吧,下面的不知道的赶紧度娘一下吧
console.group
console.time
console.info
console.warn
console.error

预告

下篇文章就写这个插件f-lazyload,我已经写了差不多了,是个懒加载插件
具体细节先去github看一吧[f-lazyload仓库](https://github.com/ifir/f-lazyload)
重要的事情说三遍star,star,star你的支持就是动力

GPU云服务器云服务器 js视频预加载插件预加载图片预加载 cdn预加载

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87967.html

实践中的电商前端优化

摘要：前端优化已经是一个被写烂的题材了。前端模板方案有很多。重绘是浏览器性能优化的一个重点，特别是针对的优化。如果你对前端性能优化有自己的想法，欢迎骚扰我。前端优化已经是一个被写烂的题材了。虽千万人吾往矣，这里我仅分享我的一些实践经验。欢迎一起交流欢迎关注我的个人公众号，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

Michael_Ding 2019-08-29 11:30 评论0 收藏0
实践中的电商前端优化

摘要：前端优化已经是一个被写烂的题材了。前端模板方案有很多。重绘是浏览器性能优化的一个重点，特别是针对的优化。如果你对前端性能优化有自己的想法，欢迎骚扰我。前端优化已经是一个被写烂的题材了。虽千万人吾往矣，这里我仅分享我的一些实践经验。欢迎一起交流欢迎关注我的个人公众号，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

Dongjie_Liu 2019-08-22 10:42 评论0 收藏0
实践中的电商前端优化

摘要：前端优化已经是一个被写烂的题材了。前端模板方案有很多。重绘是浏览器性能优化的一个重点，特别是针对的优化。如果你对前端性能优化有自己的想法，欢迎骚扰我。前端优化已经是一个被写烂的题材了。虽千万人吾往矣，这里我仅分享我的一些实践经验。欢迎一起交流欢迎关注我的个人公众号，不定期更新自己的工作心得。 showImg(https://segmentfault.com/img/remote...

lakeside 2019-08-01 15:53 评论0 收藏0
手把手教你撸个vue2.0弹窗组件

摘要：组件结构同组件结构通过方法获取元素的大小及其相对于视口的位置，之后对提示信息进行定位。可以用来进行一些复杂带校验的弹窗信息展示，也可以只用于简单信息的展示。可以通过属性来显示任意标题，通过属性来修改显示区域的宽度。手把手教你撸个vue2.0弹窗组件在开始之前需要了解一下开发vue插件的前置知识，推荐先看一下vue官网的插件介绍预览地址 http://haogewudi.me/k...

mrli2016 2019-08-20 18:36 评论0 收藏0