沒事擼個插件玩1--預加載插件(f-preload)

nihao 發布于2019-08-21 14:36 / 831人閱讀

摘要：模式用開發時記錄圖片的加載信息很熟悉吧下面的不知道的趕緊度娘一下吧預告下篇文章就寫這個插件我已經寫了差不多了是個懶加載插件具體細節先去看一吧倉庫重要的事情說三遍你的支持就是動力

沒事擼個插件玩--預加載插件(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預加載

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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