延迟加载脚本

发表 admin at 2024年8月26日

类别

未分类

标签

该网站搜索功能所需的脚本仅在搜索栏处于焦点时加载。这样，它们只会为决定使用搜索功能的用户加载，带宽和页面重量可以大大减少。毕竟，只有一小部分访问者会使用搜索功能，那么为什么要每次都花费这么多钱呢？

为了实现这个简单的延迟加载技术，我们首先定义一个我们将调用的函数loadScript：

function loadScript(url) {
  let isLoaded = document.querySelectorAll('.search-script');
  if(isLoaded.length > 0) {
    return;
  }

  let myScript = document.createElement("script");
  myScript.src = url;
  myScript.className = 'search-script';
  document.body.appendChild(myScript);
}

该函数首先检查脚本是否已加载，如果已加载，它将直接返回，而不是尝试多次加载。然后，我们用创建一个脚本元素document.createElement，将传入的 url 作为其值传递给源码属性，给它一个类名，以便我们的检查能够正常工作，然后附加这个新的脚本元素添加到 body 元素中。

最后一步是在搜索输入上简单地设置一个事件监听器，并loadScript使用我们的脚本的 url 调用我们的函数：

var searchInput = document.querySelector('.algolia__input');
searchInput.addEventListener('focus', function(e) {
  loadScript('/path/to/search-script.js');
});

显然，这意味着从理论上讲，在搜索框中聚焦和脚本可用之间会有短暂的延迟。在大多数情况下，这不会成为问题，在这种情况下，实时搜索会在脚本完全加载后立即开始。