摘要:再次更新預加載組件,更新點如下添加語法支持資源預加載組件隊列,可以支持隊列加載和回調,也可以加載視頻或者音頻進度條,可以動態獲取進度條信息支持標簽的預加載,添加屬性即可原生訪問資源預加載組件必填加載隊列容器,支持隊列加載以及加載一個
再次更新預加載組件,更新點如下:
添加ES6語法支持
React-Preload
preload資源預加載組件
隊列,可以支持隊列加載和回調,也可以加載視頻或者音頻
進度條,可以動態獲取進度條信息
支持img標簽的預加載,添加pSrc屬性即可
原生ES5
demo
Installgit clone https://github.com/jayZOU/preload.git npm install npm run es6
訪問http://localhost:8080/es6-demo
Examples/** * Preload 資源預加載組件 * @author jayzou * @time 2016-1-12 * @version 1.0.6 * @class Preload * @param {object} sources 必填 加載隊列容器,支持隊列加載以及加載一個隊列后傳入回調 * @param {boolean} isDebug 選填 是否開啟debug選項,用于移動端調試,默認false * @param {object} connector 選填 后臺數據接口,可選擇同步或異步 * @param int loadingOverTime 選填 預加載超時時間,默認15, 單位:秒 * @param {object} loadingOverTimeCB 選填 預加載超時回調 * @param {object} wrap 選填 進度條容器,返回記載進度信息 * @param {object} completeLoad 選填 完成所有加載項執行回調,包括同、異步獲取數據 **/ var preload = new Preload({ isDebug: true, sources: { imgs: { source: [ "../public/image/b2.jpg", "../public/image/b1.jpg" ], callback: function() { console.log("隊列1完成"); } }, audio: { source: [ "../public/audio/a.mp3", "../public/audio/b.mp3" ] }, imgs2: { source: [ "../public/image/b3.jpg", "../public/image/b4.jpg", "http://7xl041.com1.z0.glb.clouddn.com/OrthographicCamera.png", "http://7xl041.com1.z0.glb.clouddn.com/audio.gif", ], callback: function() { console.log("隊列3完成"); } } }, loadingOverTime: 3, loadingOverTimeCB: function(res) { console.log("資源加載超時:", res); }, connector: { int1: { url: "http://localhost/test/index.php?callback=read&city=上海市", jsonp: true }, int2: { url: "http://localhost/test/index.php?callback=read&city=深圳市", jsonp: false, callback: function(data) { console.log("同步:", data); } } }, progress: function(completedCount, total) { // console.log(total); console.log(Math.floor((completedCount / total) * 100)); }, completeLoad: function() { console.log("已完成所有加載項"); } }); function read() { console.log("異步:", arguments[0]) }Notes
隊列名稱不能重名,否則后面的隊列會覆蓋前面
ES6模式編寫,隊列之間同步加載,隊列內資源為異步加載
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/85995.html
摘要:例如,將獲得最高優先級,而將獲得低優先級或中優先級。不帶屬性的的優先級將會等同于異步請求。對使用屬性,不然將不會從中獲益。因此,在標記中聲明以被掃描器掃描。 這是 Web 性能優化的第 6 篇,上一篇在下面看點擊查看: Web 性能優化:使用 Webpack 分離數據的正確方法 Web 性能優化:圖片優化讓網站大小減少 62% Web 性能優化:緩存 React 事件來提高性能 We...
摘要:和可以用來指定資源是最高優先級的。如果用戶進入指定的鏈接,隱藏的這個頁面就會進入馬上進入用戶的視線。微軟最近也宣布會讓在上用類似的技術。 預加載 現在的網絡情況雖然很樂觀,但是 defer和async 當瀏覽器碰到 script 腳本的時候: 沒有 defer 或 async,瀏覽器會立即加載并執行指定的腳本,立即指的是在渲染該 script 標簽之下的文檔元素之前,也就是說不等待后...
摘要:當然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析,瀏覽器默認會解析超鏈接屬性的里面的域名,并且你的網站域名還不能是,如果是,則需要設置請求頭或加入一段強制開啟域名解析的標簽。 廢話:異步加載和預加載一直都是前端優化必備技能之一,今天我們就來深度解析一下常用的幾個關鍵點。 異步加載 廢話不多說,任何長篇大論的教程都抵不過一張清晰明了的高清大圖來得好: showImg(http...
摘要:當然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析,瀏覽器默認會解析超鏈接屬性的里面的域名,并且你的網站域名還不能是,如果是,則需要設置請求頭或加入一段強制開啟域名解析的標簽。 廢話:異步加載和預加載一直都是前端優化必備技能之一,今天我們就來深度解析一下常用的幾個關鍵點。 異步加載 廢話不多說,任何長篇大論的教程都抵不過一張清晰明了的高清大圖來得好: showImg(http...
摘要:但這些加載器對于瀏覽器的加載優先級隊列完全束手無策,這也使得他們不得不屈服于同樣的性能問題。 參考文章:https://developer.mozilla.org... 先簡單介紹下 link 標簽作用 你可以在頁面 元素內部使用 標簽書寫一些聲明式的資源獲取請求 preload (預加載) 有些資源是在頁面加載完成后即刻需要的,對于這種即刻需要的資源,你可能希望在頁面加載的生命...
閱讀 2805·2019-08-30 15:55
閱讀 2853·2019-08-30 15:53
閱讀 2289·2019-08-26 13:47
閱讀 2551·2019-08-26 13:43
閱讀 3153·2019-08-26 13:33
閱讀 2794·2019-08-26 11:53
閱讀 1789·2019-08-23 18:35
閱讀 795·2019-08-23 17:16