处理元素加载进度的 jQuery 插件 - Loader

版本:

浏览量:1209

最后更新：2021-09-12

应用标签：MAC 软件 Jquery插件 git

推荐指数:

查看演示点击下载

详细信息

nite-preloader 是一个 jQuery 插件，用于处理 'Heavy' html 元素（例如图像、音频和视频）的加载进度。还可以延迟加载这些媒体并在完全加载时自动播放视频/音频。非常适合异步 Web 应用程序。

如何使用它：

1. 首先，在您的页面中包含最新的 jQuery 库和 jQuery nite-preloader 插件的脚本。

<script src="https://code.jquery.com/jquery-1.12.4.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<script src="jquery.nite.preloader.js"></script>

2. 使用以下data-nite-src属性将您自己的图像、视频或音频元素嵌入到页面中：

<img data-nite-src="1.jpg">
 
<video autoplay muted loop class="target">
  <source data-nite-src="1.mp4" type="video/mp4">
  <source data-nite-src="1.ogg" type="video/ogg">
</video>

3. 初始化插件，我们就可以开始了。

$('.container').nitePreload();

4.插件的默认配置选项。

$('.container').nitePreload({
 
  // default attribute
  srcAttr       : 'data-src',
  srcsetAttr    : 'data-srcset',
   
  // loads element when visible
  visible       : false,
 
  // sequential loading
  sequential    : false,
 
  // shows backgrounds
  backgrounds   : false,
 
  // extra attibutes
  extraAttrs    : [],
 
  // autoplay on load
  playthrough   : false
   
});

5. 可能的回调函数来处理加载进度。

$('.container').nitePreload({
 
  onComplete: function onComplete(instance, resources) {
    // ...
  },
 
  onProgress: function onProgress(instance, resource) {
    // ...
  },
 
  onLoad: function onLoad(instance, resource) {
    // ...
  },
   
  onError: function onError(instance, resource) {
 
    // ...
  }
 
});