使用PromiseAPI加载JS、CSS或图像文件

使用JavaScript或TypeScript加载资源(JavaScript，CSS，图像)的最简单方法。

Web应用程序通常使用第三方API在应用程序的特定路由上提供功能，其中许多API都很繁重，并且NPM上没有软件包。在Web应用程序上添加这些API的通常方法是将其添加到主HTML文件中，使用这种方法会大大影响页面加载时间。例如，如果是JavaScript文件，它将下载，编译并执行脚本。

如果我们可以避免在页面首次加载时加载这些API会怎样呢?这将有助于更快地加载页面内容，减少总体网络数据的使用，并降低低端设备的内存使用。

Loadx API

Loadx API将通过以下功能帮助我们异步加载资源：

• 加载JS，CSS或图像
• 缓存结果
• ⏳️出色地实现了Promise和async/await
• ️压缩后的ES3仅400字节

让我们使用此API创建一个示例：

 
 
 
 

  
  
  
  
import loadx from 'loadx'; 
  
  
  
  
async function getUser() {  // 加载Axios API 
  
  
  
  
  await loadx.js('https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.2/axios.min.js'); 
  
  
  
  
  // 从Rest API获取用户 
  
  
  
  
  return axios.get('/user/12345'); 
  
  
  
  
}async function loadImage(url) {  // 图像容器 
  
  
  
  
  const containerEl = document.querySelector('.container'); 
  
  
  
  
  // loading spinner 
  
  
  
  
  const spinnerEl = document.querySelector('.spinner'); 
  
  
  
  
    if (containerEl === null || spinnerEl === null) { 
  
  
  
  
    throw new Error('Image container not found') 
  
  
  
  
  }    // show the spinner 
  
  
  
  
  spinnerEl.style.diplay = 'block'; 
  
  
  
  
  // 加载图像 
  
  
  
  
  await loadx.img(url, containerEl); 
  
  
  
  
  // hide the spinner 
  
  
  
  
  spinnerEl.style.diplay = 'none'; 
  
  
  
  
}function loadCSSFramework() {  // 简单加载Tailwind CSS 
  
  
  
  
  loadx.css('https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css'); 
  
  
  
  
} 
 
 
 
 

结束

现在，只有在需要时才可以加载资源。试一试吧!

文章题目：使用PromiseAPI加载JS、CSS或图像文件
文章分享：http://www.shufengxianlan.com/qtweb/news10/385660.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联