如何延迟加载即时函数

问题描述 投票：0回答：1

在开始之前，我想指出我正在学习 JS，所以这可能是微不足道的，但是很难做到延迟加载立即函数https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle .js

例如，我有一个单击事件，应该加载所述 Swiper-bundle.js 然后启动 Swiper：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <h1>Making Swiper Web Component</h1>
  <button type="button" id="swiperbtn">Try Swiper</button>
  <div id="placehodler">

  </div>
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-7.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-8.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-9.jpg" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <script>
    var type = 'coverflow';

    window.addEventListener("DOMContentLoaded", e => {
      //add click listener to the button
      document.getElementById('swiperbtn').addEventListener('click', e => {

        (async () => {
          const object = await import("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.js");

          console.log("Swiper-bundle.min.js loaded...");

          var swiper = new Swiper(".mySwiper", {
            effect: "coverflow",
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: "auto",
            coverflowEffect: {
              rotate: 50,
              stretch: 0,
              depth: 100,
              modifier: 1,
              slideShadows: true,
            },
            pagination: {
              el: ".swiper-pagination",
            },
          });

        })();
      });

    });
  </script>
</body>

</html>

当我点击按钮时，出现错误： enter image description here

我看到 swiper-bundle.js 没有模块导出结构，但它有即时功能。它是如何在 import() 上工作的？谢谢您的帮助

javascript import async-await promise es6-promise
1个回答
1
投票

动态导入（即：

import()
）应用于加载ECMAScript Modules（ESM）。在您的情况下，位于 CDN URL 的资源不是 ESM，它只是一个创建变量的常规 JavaScript 文件，如果您想延迟加载库，则该文件没有多大用处，并且不能与
import()
。

Swiper-js 确实托管了该库的 ESM 版本，您可以通过将 URL 更改为导入来访问该库 

.mjs
而不是 
.js
：

https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.mjs

动态导入（大多数情况下）也不会影响全局范围，因此在导入库后，

Swiper
构造函数不会自动变得可用，您将需要从您的模块对象访问它从导入中恢复，例如通过像这样销毁它：

const { Swiper } = await import(...);


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Swiper demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" />
  <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />

  <!-- Demo styles -->
  <style>
    html,
    body {
      position: relative;
      height: 100%;
    }

    body {
      background: #eee;
      font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
      font-size: 14px;
      color: #000;
      margin: 0;
      padding: 0;
    }

    .swiper {
      width: 100%;
      padding-top: 50px;
      padding-bottom: 50px;
    }

    .swiper-slide {
      background-position: center;
      background-size: cover;
      width: 300px;
      height: 300px;
    }

    .swiper-slide img {
      display: block;
      width: 100%;
    }
  </style>
</head>

<body>
  <!-- Swiper -->
  <h1>Making Swiper Web Component</h1>
  <button type="button" id="swiperbtn">Try Swiper</button>
  <div id="placehodler">

  </div>
  <div class="swiper mySwiper">
    <div class="swiper-wrapper">
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-1.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-2.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-3.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-4.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-5.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-6.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-7.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-8.jpg" />
      </div>
      <div class="swiper-slide">
        <img src="https://swiperjs.com/demos/images/nature-9.jpg" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>

  <script>
    var type = 'coverflow';

    window.addEventListener("DOMContentLoaded", e => {
      //add click listener to the button
      document.getElementById('swiperbtn').addEventListener('click', e => {

        (async () => {
          const { Swiper } = await import("https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.mjs");

          console.log("Swiper-bundle.min.js loaded...");

          var swiper = new Swiper(".mySwiper", {
            effect: "coverflow",
            grabCursor: true,
            centeredSlides: true,
            slidesPerView: "auto",
            coverflowEffect: {
              rotate: 50,
              stretch: 0,
              depth: 100,
              modifier: 1,
              slideShadows: true,
            },
            pagination: {
              el: ".swiper-pagination",
            },
          });

        })();
      });

    });
  </script>
</body>

</html>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.