loadgo, LoadGo是一个用于将你的logo 用作进度条的Javascript插件

分享于 

16分钟阅读

GitHub

  繁體 雙語
LoadGo is a JQuery plugin that allow you to simulate loading images by using your own images.
  • 源代码名称:loadgo
  • 源代码网址:http://www.github.com/franverona/loadgo
  • loadgo源代码文档
  • loadgo源代码下载
  • Git URL:
    git://www.github.com/franverona/loadgo.git
    Git Clone代码到本地:
    git clone http://www.github.com/franverona/loadgo
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/franverona/loadgo
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    

    什么是 LoadGo?

    Batman Example

    LoadGo 是一个Javascript插件,允许你使用自己的图像创建进度栏。

    • 当用户等待加载东西( 网站,检索信息,更新状态,等等 ) 时,logo 动画的完美

    • 它在 img 元素中创建一个覆盖 上面,并使用维度更改模拟加载过程。

    • 在 IE 9,IE 10,IE Edge,Google Chrome 和 Mozilla Firefox 中测试。

    LoadGo

    LoadGo 也可以用于Wordpress作为一个名为LoadGo的插件。 这里插件使用速度跟踪页面加载进度,并使用LoadGo显示具有这里进度的logo。

    更改

    由于 2.2 版本,现在英镑LoadGo在一个 div 元素上包装图像,然后将覆盖作为该模板后的第一个同级图像添加到其中:

    
    <div class="loadgo-container">
    
    
     <image src="logo.png" class="..." style="..."/>
    
    
     <div class="loadgo-overlay" style="..."/>
    
    
    </div>
    
    
    
    

    这个变化使得插件可以很容易地计算覆盖和位置的尺寸。 确保正确应用了 div> img 之类的CSS规则。

    例如如果你有如下所示的html和 CSS:

    
    <style>
    
    
    . image-container> img {
    
    
     margin: 0 auto;
    
    
     }
    
    
    </style>
    
    
    
    <div class="image-container">
    
    
     <img src="logo.png"/>
    
    
    </div>
    
    
    
    

    你应该将它的更改为:

    
    <style>
    
    
     div> div> img {
    
    
     margin: 0 auto;
    
    
     }
    
    
    </style>
    
    
    
    <div class="image-container">
    
    
     <img src="logo.png"/>
    
    
    </div>
    
    
    
    

    或者,分配一个CSS类并忘记 >:

    
    <style>
    
    
    . my-image {
    
    
     margin: 0 auto;
    
    
     }
    
    
    </style>
    
    
    
    <div class="image-container">
    
    
     <img src="logo.png" class="my-image"/>
    
    
    </div>
    
    
    
    

    变更日志

    2.2 - 最新版本( 23-06-2017 )

    • 添加了一个新方法:destroy
    • 添加的测试( 将来会增加更多的内容)。
    • 修复多个 Bug。
    • LoadGo默认模板已经更改。
    • 改进的文档。
    • Javascript版本改进。
    • jQuery版本改进。

    英镑 2.1 - ) ( 12-04-2016 )

    • 使用 LoadGo jQuery版本修复 Bug,其中'左至右'direction 不工作。
    • 添加了一些示例。

    磅磅( 02-04-2016 )

    • 纯Javascript版本发布: 现在你可以不用jQuery使用LoadGo插件。
    • 调整窗口大小时修复覆盖重定位 Bug。

    磅磅( 02-11-2015 )

    • 修复带有更新的jQuery版本的'未定义'错误。

    磅磅( 15-10-2015 )

    • 第一个版本。

    测试

    测试可以在 test/jquery 文件夹下找到jQuery版本测试,和纯Javascript版本测试 test/javascript。 只要在浏览器中打开 index.html 文件,所有测试都应该成功执行。

    测试是使用 mocha 完成的。

    如何使用 LoadGo

    生产环境( CDN )

    现在,在 cdnjs 上托管英镑( 17 -oct-2015 ) 英镑 LoadGo ,因此你可以直接将它的连接。 感谢cdnjs团队快速响应 ! ( issue#5927 )

    
    <!-- If you use jQuery -->
    
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/LoadGo/2.2/loadgo.min.js"></script>
    
    
    
    <!-- If you don't use jQuery -->
    
    
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/LoadGo/2.2/loadgo-nojquery.min.js"></script>
    
    
    
    

    插件开发环境

    下载LoadGo这个链接或者从GitHub克隆它

    解压( 如果压缩) 并将 LoadGo 文件夹复制到你的JS脚本中。

    在网页中插入以下代码:

    
    <!-- If you use jQuery -->
    
    
    <script type="text/javascript" src="loadgo/loadgo.js"></script>
    
    
    
    <!-- If you don't use jQuery -->
    
    
    <script type="text/javascript" src="loadgo/loadgo-nojquery.js"></script>
    
    
    
    

    你还可以使用缩小插件版本:

    
    <!-- If you use jQuery -->
    
    
    <script type="text/javascript" src="loadgo/loadgo.min.js"></script>
    
    
    
    <!-- If you don't use jQuery -->
    
    
    <script type="text/javascript" src="loadgo/loadgo-nojquery.min.js"></script>
    
    
    
    

    为了正确读取它的尺寸,LoadGo 需要完全加载的图像。 如果不确定将会发生什么情况,可以使用这段代码和每个图像:

    
    //jQuery
    
    
    $("#my-image").load(function() {
    
    
     $('#my-image').loadgo();
    
    
    }).each(function() {
    
    
     if(this.complete) $(this).load();
    
    
    });
    
    
    
    //Javascript
    
    
    var image = document.getElementById("my-image");
    
    
    image.onload = function () {
    
    
     Loadgo.init(this);
    
    
    };
    
    
    
    

    示例

    你可以检查以下示例:

    文档

    简介

    为你提供了一个插件,它为你提供了一个更好的方法,让你的用户能够更新关于装载过程的信息。 某些使用情况可能是:

    • 用户将文件上载到服务器。
    • 系统正在将文件转换为 PDF。
    • 正在加载当前页。

    为此,LoadGo 将你的图像包装成 div,并添加一个覆盖 inside 这个包装。 然后,当设置一个进度来模拟加载行为时,它会改变覆盖的尺寸。

    这个插件不能控制加载过程的异步行为,所以你必须自己在应用程序中进行。

    LoadGo 只能在 id 给出的img 元素上工作。 例如这将工作:

    
    //HTML
    
    
    <div>
    
    
     <img id="logo" src="logo.png" alt="Logo"/>
    
    
    </div>
    
    
    
    //jQuery
    
    
    $('#logo').loadgo();
    
    
    
    //Javascript
    
    
    Loadgo.init(document.getElementById('logo'));
    
    
    
    

    但是这英镑不能工作:

    
    //HTML
    
    
    <div>
    
    
     <img src="logo.png" alt="Logo" class="logo"/>
    
    
    </div>
    
    
    <div>
    
    
     <img src="logo.png" alt="Logo" class="logo"/>
    
    
    </div>
    
    
    
    //jQuery
    
    
    $('.logo').loadgo();
    
    
    
    //Javascript
    
    
    Loadgo.init(document.getElementByClass('logo'));
    
    
    
    

    初始化

    在使用前,需要在 img 元素中初始化 LoadGo

    
    //jQuery
    
    
    $('#logo').loadgo();
    
    
    
    //javascript
    
    
    Loadgo.init(document.getElementById('logo'));
    
    
    
    

    现在,你可以设置和模拟一个进程。 LoadGo 有一些方法和一些可以帮助你的选项。

    如果你希望实现自己的调整大小函数或者其他一些高级功能,LoadGo 还将一个空的CSS类应用到称为 loadgo-overlay的。

    命令行选项

    名称类型默认说明
    bgcolorString#FFFFFF十六进制或者RGB覆盖的background 颜色。
    opacityNumber0.5覆盖透明度。
    animatedBooleantruetrue 如果在使用 setprogress 时启用CSS动画,则为 false。 请记住,IE 不支持CSS转换。
    imageStringnull要使用 background 图像而不是简单颜色时使用的图像 url。 这里选项禁用 bgcolor 选项。
    classStringnull将应用到覆盖的CSS类。 确保所有的看起来都不错,因为一些CSS选项可能会使其他 LoadGo 插件。
    resizeFunction自定义LoadGo 提供一个自动调整它的默认大小的函数,但你可以使用自己的。
    directionStringlr动画 direction。可能的值:lr ( 左至右),rl ( 从右向左),bt ( 底部至顶部),tb ( 顶部至底部)。
    filterStringCSS图像过滤器符合 CSS滤镜属性。 可能的值:blurgrayscalesepiahue-rotateinvertopacity

    方法

    获取/设置选项

    $element.loadgo('options', <options>) | Loadgo.options(<element>, <options>)

    获取/设置插件选项设置选项时,参数必须是JSON对象。 如果元素已经启动,并且你希望根据应用程序的逻辑动态地更改属性,这是特别有用的。

    
    //jQuery - Get current options
    
    
    $('#logo').loadgo('options');
    
    
    
    //Javascript - Get current options
    
    
    Loadgo.options(document.getElementById('logo'));
    
    
    
    //jQuery - Set options
    
    
    $('#logo').loadgo('options', { direction: 'bt' });
    
    
    
    //Javascript - Set options
    
    
    Loadgo.options(document.getElementById('logo'), { direction: 'bt' });
    
    
    
    

    设置进度

    $element.loadgo('setprogress', <number>) | Loadgo.options(<element>, <number>)

    将进度编号设置为加载覆盖。 这里数字必须介于 0100 之间。

    
    //jQuery
    
    
    $('#logo').loadgo('setprogress', 50);
    
    
    
    //Javascript
    
    
    Loadgo.setprogress(document.getElementById('logo'), 50);
    
    
    
    

    复位进程

    $element.loadgo('resetprogress') | Loadgo.resetprogress(<element>)

    重置当前进度。当使用相同的元素时,这是非常有用的。

    
    //jQuery
    
    
    $('#logo').loadgo('resetprogress');
    
    
    
    //Javascript
    
    
    Loadgo.resetprogress(document.getElementById('logo'));
    
    
    
    

    获得进展

    $element.loadgo('getprogress') | Loadgo.getprogress(<element>)

    获取当前进度。这里数字将在 0100 之间。

    
    //jQuery
    
    
    $('#logo').loadgo('getprogress');
    
    
    
    //Javascript
    
    
    Loadgo.getprogress(document.getElementById('logo'));
    
    
    
    

    开始循环

    $element.loadgo('loop', <number>) | Loadgo.loop(<element>, <number>)

    将覆盖设置为无限循环直到停止。 对于你无法测量进度的情况,这是非常有用的。 这里方法接受持续时间( ms ) 参数以自定义动画速度。

    
    //jQuery
    
    
    $('#logo').loadgo('loop', 10);
    
    
    
    //Javascript
    
    
    Loadgo.loop(document.getElementById('logo'), 10);
    
    
    
    

    停止循环

    $element.loadgo('stop') | Loadgo.stop(<element>)

    停止以前使用 loop 方法启动的循环,并显示完整的图像。 由于循环是不确定的,我们需要使用这里方法手动停止它。

    
    //jQuery
    
    
    $('#logo').loadgo('stop');
    
    
    
    //Javascript
    
    
    Loadgo.stop(document.getElementById('logo'));
    
    
    
    

    销毁

    $element.loadgo('destroy') | Loadgo.destroy(<element>)

    移除所有插件属性并还原所有内容。 这里方法还将删除创建( loadgo-containerloadgo-overlay )的div 元素,因此在调用 destroy 之前,请确保没有使用它们。

    
    //jQuery
    
    
    $('#logo').loadgo('destroy');
    
    
    
    //Javascript
    
    
    Loadgo.destroy(document.getElementById('logo'));
    
    
    
    

    的实际示例

    使用你的网页,你可以在网页上使用 Uploadify插件,为用户提供上传文件的方法( 例如: 更新他的/她的web虚拟机。大多数插件提供了 onUploadStartonUploadProgress 或者 onUploadComplete 等事件。 这些事件具有变量,这些变量提供了有关当前加载进度( 文件大小,当前上传的字节等)的大量信息。

    你可以使用 LoadGo 来更新 logo 覆盖,如下所示:

    
    //Set LoadGo on your Logo
    
    
    $('#logo').loadgo();
    
    
    
    //Set Uploadify on your upload input
    
    
    $('#uploadinput').uploadify({
    
    
    //init options...
    
    
     onUploadStart: function (event) {
    
    
    //Upload is going to start, so we need to reset loadgo
    
    
     $('#logo').loadgo('resetprogress');
    
    
     },
    
    
     onUploadProgress: function (event) {
    
    
    //We receive some bytes on our upload and update loadgo progress,
    
    
    //but first, we should calculate total uploaded percentage
    
    
     var p = event.bytesLoaded/event.bytesTotal;
    
    
     $('#logo').loadgo('setprogress', p);
    
    
     },
    
    
     onUploadComplete: function (event) {
    
    
    //Upload complete
    
    
     }
    
    
    });
    
    
    
    

    LoadGo 在MIT许可下。 免费下载,修改和修改你自己的目的。 如果发现任何 Bug,发送请求请求或者写问题。

    Credits

    Say ) !

    磅 Fran