jQuery loader.JS动态加载JS和CSS及其依赖项

  • 源码大小:11.66KB
  • 所需积分:1积分
  • 源码编号:19JP-3461
  • 浏览次数:407次
  • 最后更新:2023年06月15日
  • 所属栏目:加载
我要下载
加入收藏
本站默认解压密码:19jp.com 或 19jp_com

简介

loader.js是一个轻量级的资产加载器jQuery插件,它允许您在文档中动态加载JavaScript和样式表文件及其依赖项。

该插件的目标是简化添加CSS和JavaScript文件的任务,并使其更容易控制何时将这些文件加载到页面中。

如何使用它:

1.首先,在jQuery之后包含loader.js库。

<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/jquery.loader.js"></script>

2.定义一个JavaScript(和/或CSS)文件数组及其依赖关系,如下所示:

// JavaScript
const jsList = [
      {
        name: 'main',
        src: 'js/main.js',
        dep: [
          'sub-1',
          'sub-2'
        ]
      },
      {
        name: 'sub-1',
        src: 'js/sub1.js',
        dep: [
          'sub-3'
        ]
      },
      {
        name: 'sub-2',
        src: 'js/sub2.js',
        dep: []
      },
      {
        name: 'sub-3',
        src: 'js/sub3.js',
        dep: []
      }
],

// CSS
const cssList = [
      {
        name: 'main',
        src: 'css/main.css',
        dep: [
          'sub-1',
          'sub-2'
        ]
      },
      {
        name: 'sub-1',
        src: 'css/sub1.css',
        dep: [
          'sub-3'
        ]
      },
      {
        name: 'sub-2',
        src: 'css/sub2.css',
        dep: []
      },
      {
        name: 'sub-3',
        src: 'css/sub3.css',
        dep: []
      }
],

3.可用的插件选项。

$.loader ({
  js: jsList,
  css: cssList,
  // enable browser cache
  cache: false,
  // 0 will disable retry.
  retryLimit: 3,
  // timeout in miliseconds to wait for script load
  // 0 will disable timeout
  timeout: 0,
});

4.可用的回调功能。

$.loader ({
  js: jsList,
  css: cssList,
  onupdate: function (script){
    // on update
  },
  onrefresh: function (loaded, total, percentage){
    // on refresh
  },
  onfinish: function (total){
    // on finish
  },
  onloadfail: function (error){
    // on load fail
  },
  onsuccess: function (name){
    // on success
  },
  onfail: function (name){
    // on fail
  }
});

预览截图