资源预加载---preload

VioletJack 发布于2019-08-21 10:41 / 1020人阅读

摘要：再次更新预加载组件，更新点如下添加语法支持资源预加载组件队列，可以支持队列加载和回调，也可以加载视频或者音频进度条，可以动态获取进度条信息支持标签的预加载，添加属性即可原生访问资源预加载组件必填加载队列容器，支持队列加载以及加载一个

再次更新预加载组件，更新点如下：

添加ES6语法支持

React-Preload

preload

资源预加载组件

队列，可以支持队列加载和回调，也可以加载视频或者音频

进度条，可以动态获取进度条信息

支持img标签的预加载，添加pSrc属性即可

原生ES5

demo

Install

git 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模式编写，队列之间同步加载，队列内资源为异步加载

服务器托管私有云预加载图片预加载 cdn预加载 java预加载

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

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

Web 性能优化：Preload,Prefetch的使用及在 Chrome 中的优先级

摘要：例如，将获得最高优先级，而将获得低优先级或中优先级。不带属性的的优先级将会等同于异步请求。对使用属性，不然将不会从中获益。因此，在标记中声明以被扫描器扫描。这是 Web 性能优化的第 6 篇，上一篇在下面看点击查看： Web 性能优化：使用 Webpack 分离数据的正确方法 Web 性能优化：图片优化让网站大小减少 62% Web 性能优化：缓存 React 事件来提高性能 We...

LiangJ 2019-08-23 16:52 评论0 收藏0
preload、prefetch的认识

摘要：和可以用来指定资源是最高优先级的。如果用户进入指定的链接，隐藏的这个页面就会进入马上进入用户的视线。微软最近也宣布会让在上用类似的技术。预加载现在的网络情况虽然很乐观，但是 defer和async 当浏览器碰到 script 脚本的时候：没有 defer 或 async，浏览器会立即加载并执行指定的脚本，立即指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后...

alogy 2019-08-29 17:13 评论0 收藏0
深度解析之异步加载和预加载

摘要：当然并不是所有的页面需要用到的外部域名都需要做这样的域名解析，浏览器默认会解析超链接属性的里面的域名，并且你的网站域名还不能是，如果是，则需要设置请求头或加入一段强制开启域名解析的标签。废话：异步加载和预加载一直都是前端优化必备技能之一，今天我们就来深度解析一下常用的几个关键点。异步加载废话不多说，任何长篇大论的教程都抵不过一张清晰明了的高清大图来得好： showImg(http...

qpal 2019-08-02 16:10 评论0 收藏0
深度解析之异步加载和预加载

摘要：当然并不是所有的页面需要用到的外部域名都需要做这样的域名解析，浏览器默认会解析超链接属性的里面的域名，并且你的网站域名还不能是，如果是，则需要设置请求头或加入一段强制开启域名解析的标签。废话：异步加载和预加载一直都是前端优化必备技能之一，今天我们就来深度解析一下常用的几个关键点。异步加载废话不多说，任何长篇大论的教程都抵不过一张清晰明了的高清大图来得好： showImg(http...

HackerShell 2019-08-26 13:41 评论0 收藏0
Link 标签的预加载机制

摘要：但这些加载器对于浏览器的加载优先级队列完全束手无策，这也使得他们不得不屈服于同样的性能问题。参考文章：https://developer.mozilla.org... 先简单介绍下 link 标签作用你可以在页面元素内部使用标签书写一些声明式的资源获取请求 preload (预加载) 有些资源是在页面加载完成后即刻需要的，对于这种即刻需要的资源，你可能希望在页面加载的生命...

付永刚 2019-08-02 15:28 评论0 收藏0