前端页面有时候可能遇到只有在某些小场景下需要额外的js库，如果我们把这些库或样式一开始就放置到head里进行加载，往往从用户进入浏览到离开也不会触达这些库或样式的被使用场景，所以一个好的优化手段就是进入这些特定场景下时动态去加载依赖库，做到有需要才使用， 今天推荐的就是此功能，加载时可以做到是否已经存在检测及加载完成通知回调。

使用方式

1. 引入加载库

<script src="tr.easydynamic_load_css_js.min.js"></script>

2. 执行加载 （这里我们拿pdf预览作为演示使用）

TR.LoadJSAndCSS(
[
    'https://your.cdn.com/js/pdf.js',
    'https://your.cdn.com/js/pdf.worker.js',
    'https://your.cdn.com/js/pdfh5.js',
    'https://your.cdn.com/js/pdfh5.worker.js'
], 
[
    'https://your.cdn.com/css/pdfh5.css'
], 
  () => {
    //加载完成
    this.pdfh5 = new window.Pdfh5('#demo', {
        pdfurl: 'pdf地址'
    })
}, (p) => {
    //加载进度
    console.log('load:', p)
})

• 参数1 为待加载js地址列表
• 参数2为待加载css地址列表
• 参数3为加载完成回调通知
• 参数4为加载进度回调通知

是不是很简单呢？ 奉上库地址

https://github.com/Ti-R/EasyDynamicLoad-CSS-JS

关注、点赞、评论老码每天分享！