插件 jQuery.html5loader 中文API文档

🌙
手机阅读
本文目录结构

插件 jQuery.html5loader 中文API文档 https://github.com/GianlucaGuarini/jquery.html5loader

Introduction

jQuery.html5Loader can preload images, SVGs, html5 video and audio sources, css, scripts and text files. This plugin needs a JSON file to get the files that must be preloaded (you can use also use a javascript object as well), and it provides an easy API to give you the right amount of files loaded in percentage.

All the javascript and css files will be automatically loaded and injected into the DOM

Installation


$ bower install jquery.html5loader

# or via npm

$ npm install jquery.html5loader

Features

  • smart: it loads just the sources supported by the client running the script.
  • flexible: it returns the current percentage and the object/element loaded, so you could be free to show this info as you prefer
  • fun: inside the package you could find some preloading animation examples, customizable and ready to use

Demos

Production websites using jQuery.html5loader

USAGE

1 Create a JSON file like this, containing all the files you need to preload ( size in bytes ):

{
    "files": [
      {
        "type":"SCRIPT",
        "source":"../path/to/your/script.js",
        "size":4.096,
        "stopExecution":true
      },
      {
        "type":"SCRIPT",
        "source":"../path/to/your/script.js",
        "size":4.096,
        "stopExecution":false
      },
      {
        "type":"IMAGE",
        "source":"../path/to/your/image.jpg",
        "size":620
      },
      {
        "type": "CSS",
        "source": "../files/test.css",
        "size": 16.819
      },
      {
        "type":"TEXT",
        "source":"../path/to/your/text.txt",
        "size":44
      },
      {
        "source": {
          "svg": "../files/yin-yang.svg",
          "fallback": "../files/yin-yang.jpg"
        },
        "type": "IMAGE",
        "size": 2338
      },
      {
        "type":"VIDEO",
        "sources": {
          "webm":{
            "source":"../path/to/your/video.webm",
            "size":5054.976
          },
          "ogg":{
            "source":"../path/to/your/video.ogg",
            "size":2932.736
          },
          "h264":{
            "source":"../path/to/your/video.mp4",
            "size":9285.632
          },
          "vp9": {
              "source":"../path/to/your/video.webm",
              "size":9285.632
            }
          }
        }
      },
      {
        "type":"AUDIO",
        "sources": {
          "mp3":{
            "source":"../path/to/your/audio.mp3",
            "size":9285.632
          },
          "ogg":{
            "source":"../path/to/your/audio.ogg",
            "size":2089.688
          },
          "opus": {
            "source": "../path/to/your/audio.opus",
            "size":2000.20
          },
          "wav": {
            "source": "../path/to/your/audio.wav",
            "size":2000.20
          },
          "m4a": {
            "source": "../path/to/your/audio.m4a",
            "size":2000.20
          }
        }
      }
    ]
  }

2 Import the plugin into your page:

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="../js/jQuery.html5Loader.js"></script>

3 Initialize the plugin setting the callback functions:

$.html5Loader({
      filesToLoad:    '../js/files.json', // this could be a JSON or simply a javascript object
      onBeforeLoad:       function () {},
      onComplete:         function () {},
      onElementLoaded:    function ( obj, elm) { },
      onUpdate:           function ( percentage ) {}
});

API

Methods

  • stopExecution: default false, do not execute the javascript files when they’ll be preloaded, this option could be overridden into the json per each javascript file
  • mediaBufferSizeToPreload: default 0.2, decide the the buffer size before considering the media preloaded
  • forceMediaPreload: default true, let the browser decide when the media file has been buffered enough to be played by listening the canplaythrough event
  • onBeforeLoad It is triggered right before the plugin starts loading all the files
  • onComplete It is triggered when the plugin finishes to load all the sources
  • onMediaError This function is called in case there’s an error during the preloading
    • obj original object passed to the plugin
    • elm html output (for type “SCRIPT” and “TEXT” this value is just a string)
  • stopExecution (false by default) : default behavior for all the script files, they won’t execute when loaded. This behavior can be changed by each script object passed to the plugin
  • onElementLoaded It is triggered anytime a new element of your files list gets loaded, (ATTENTION IF AN ELEMENT IS NOT SUPPORTED IT WILL NEVER PASS TROUGH THIS FUNCTION).
    • obj original object passed to the plugin
    • elm html output (for type “SCRIPT” and “TEXT” this value is just a string)
  • onUpdate it is triggered anytime new bytes are loaded
    • percentage the percentage currently loaded

Loading Segments

It is also possible to load groups of files in sequence by wrapping them in arrays. This could be handy if you need need to preload components with dependencies. e.g Backbone's dependence on underscore.

{
    "files": [
      [
        {
          "type":"SCRIPT",
          "source":"../path/to/underscore.js",
          "size":13.9
        }
      ],
      [
        {
        "source": "../path/to/backbone.js",
        "type": "SCRIPT",
        "size": 37.5
      },
      {
      "source": "../path/to/three.js",
        "type": "SCRIPT",
        "size": 150.3
      }
      ]
    ]
}

Loading SVGs

You can also load SVG files providing a fallback image. jQuery.html5Loader will detect automatically if the device supports the SVGs otherwise it will just preload the fallback image.

  "files":[
    {
      "source": {
        "svg": "../files/yin-yang.svg",
        "fallback": "../files/yin-yang.jpg"
      },
      "type": "IMAGE",
      "size": 2338
    }
  ]

KNOWN ISSUES

  • Internet Explorer 9 and 10 do not return any value using the method canPlayType on a video or audio element ( http://modernizr.com/docs/#audio ). For these browsers we don’t preload any HTML5 media format
  • on mobile devices and on the iPad we cannot load any video or audio element because these devices can’t preload those kind of elements until the user start dealing with them

TODO List

  • Write down a valid crossbrowser unit test

CHANGELOG

v1.8.0

  • added: SVGs preloading support
  • added: segments preloading
  • updated: the nprogress example

v1.7.0

  • added: better tablet detection tests
  • added: grunt
  • bugfix: skip media elements loading on mobile/tablet devices

v1.6.9

  • added: mediaBufferSizeToPreload option
  • added: forceMediaPreload option

v1.6.8

  • small refactor
  • added: new media file codecs tests
  • video: vp9
  • audio: opus, wav, m4a
  • added: stopExecution option
  • added: stopExecution option via json
  • added: nprogress demo

AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili

关注我: Github / 知乎

于2021年离开前端领域,目前重心放在研究区块链上面了

我叫朱安邦,阿西河的站长

目前在杭州从事区块链周边的开发工作,机械专业,以前从事平面设计工作。

2014年底脱产在老家自学6个月的前端技术,自学期间几乎从未出过家门,最终找到了满意的前端工作。更多>

于2021年离开前端领域,目前从事区块链方面工作了