延遲加載 javascript 腳本？

Question

有沒有辦法可以包裝嵌入延遲加載行為的外部 JS 腳本，以便僅在嵌入位於視口中時執行？

上下文：我有一個外部 javascript 嵌入，運行時會生成一個帶有調度小部件的 iframe。 工作得很好，除了當腳本執行時，它會在執行完成時竊取焦點並向下滾動到小部件。 供應商幾周來一直在尋找解決方案，但它弄亂了我的頁面。 否則我喜歡供應商。

Javascript 嵌入調用：

<a href=https://10to8.com/book/zgdmlguizqqyrsxvzo/ id="TTE-871dab0c-4011-4293-bee3-7aabab857cfd" target="_blank">See
    Online Booking Page</a>
<script src=https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js> </script> <script>
    window.TTE.init({
        targetDivId: "TTE-871dab0c-4011-4293-bee3-7aabab857cfd",
        uuid: "871dab0c-4011-4293-bee3-7aabab857cfd",
        service: 1158717
    });
</script>

在等待供應商修復他們的 js 時，我想知道延遲加載 JS 嵌入是否實際上可以消除糟糕的用戶體驗。 警告：我是一個 JS/webdev 菜鳥，所以可能不會做任何復雜的事情。 基於計時器的解決方法並不理想，因為當計時器用完時，用戶可能仍在查看頁面的其他部分。 以下是我嘗試過的事情以及會發生什么：

我試過了：	發生了什么：
將 async 添加到上面的一個或兩個腳本聲明中	要么只顯示鏈接，要么繼續竊取焦點。
將 type=”module” 添加到上面的一個或兩個腳本聲明中	只渲染了鏈接。
使用適當的延遲加載標簽將上述代碼包裝在 iframe 中	當我嘗試時，它呈現了一個空白區域。

另外，我意識到這與this基本上是相同的問題，但它沒有得到任何可行的答案。

Answer 1

我實際上也會說法語，但我會用英語為大家回復。

你的問題很有趣，因為我也想嘗試一些延遲加載，所以我在 Codepen 上玩了你的例子（使用你的預訂 ID）。

我使用了appear.js庫，因為我真的不想花時間嘗試其他一些 API（考慮到可能更輕一些）。

我寫的主要JS部分是這樣的：

// The code to init the appear.js lib and add our logic for the booking links.
(function(){
  // Perhaps these constants could be put in the generated HTML. I don't really know
  // where they come from but they seem to be related to an account.
  const VENDOR_LIB_SRC = "https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js";
  const UUID = "871dab0c-4011-4293-bee3-7aabab857cfd";
  const SERVICE = 1158717;
  
  let vendorLibLoaded = false; // Just to avoid loading several times the vendor's lib.

  appear({
    elements: function() {
      return document.querySelectorAll('a.booking-link');
    },
    appear: function(bookingLink) {
      console.log('booking link is visible', bookingLink);
      
      /**
       * A function which we'll be able to execute once the vendor's
       * script has been loaded or later when we see other booking links
       * in the page.
       */
      function initBookingLink(bookingLink) {
        window.TTE.init({
          targetDivId: bookingLink.getAttribute('id'),
          uuid: UUID,
          service: SERVICE
        });
      }
      
      if (!vendorLibLoaded) {
        // Load the vendor's JS and once it's loaded then init the link.
        let script = document.createElement('script');
        script.onload = function() {
          vendorLibLoaded = true;
          initBookingLink(bookingLink);
        };
        script.src = VENDOR_LIB_SRC;
        document.head.appendChild(script);
      } else {
        initBookingLink(bookingLink);
      }
    },
    
    reappear: false
  });
})();

我讓你在這里試試我的codepen： https://codepen.io/patacra/pen/gOmaKev?editors=1111

如果它包含敏感數據，請告訴我何時刪除它！

親切的問候，

帕特里克

Answer 2

此方法將延遲加載 HTML 元素，僅當它對用戶可見時，如果元素未滾動到視口中，它將不會被加載，它的工作方式類似於延遲加載圖像。

將LazyHTML腳本添加到 Head。

<script async src="https://cdn.jsdelivr.net/npm/lazyhtml@1.0.0/dist/lazyhtml.min.js" crossorigin="anonymous" debug></script>

在 LazyHTML Wrapper 中包裝元素。

<div class="lazyhtml" data-lazyhtml onvisible>
<script type="text/lazyhtml">
      <!--
       <a href=https://10to8.com/book/zgdmlguizqqyrsxvzo/ id="TTE-871dab0c-4011-4293-bee3-7aabab857cfd" target="_blank">See
      Online Booking Page</a>
      <script src=https://d3saea0ftg7bjt.cloudfront.net/embed/js/embed.min.js>
   </script> 
   <script>
      window.TTE.init({
      targetDivId: "TTE-871dab0c-4011-4293-bee3-7aabab857cfd",
      uuid: "871dab0c-4011-4293-bee3-7aabab857cfd",
      service: 1158717
      });
   </script>
   -->
</script>
</div>