对于本网站的搜索功能所需的脚本只有在搜索栏集中时才能加载,因此,它们只对决定使用搜索功能的人来说才能加载,带宽和页面重量可以大大降低。
为了实现这种简单的懒惰加载技术,让我们先定义一个我们称之为loadScript的函数:
1function loadScript(url) {
2 let isLoaded = document.querySelectorAll('.search-script');
3 if(isLoaded.length > 0) {
4 return;
5 }
6
7 let myScript = document.createElement("script");
8 myScript.src = url;
9 myScript.className = 'search-script';
10 document.body.appendChild(myScript);
11}
该函数首先检查了脚本是否已经被加载,在这种情况下,它只会返回,而不是试图加载它多次. 然后我们创建一个脚本元素与 document.createElement,给它通过 URL 作为其 src 属性的值,给它我们检查工作的类名称,然后将这个新的脚本元素附加到身体元素。
最后一步是简单地在搜索输入中设置一个事件倾听器,并将我们的loadScript函数与URL调用到我们的脚本中:
1var searchInput = document.querySelector('.algolia__input');
2searchInput.addEventListener('focus', function(e) {
3 loadScript('/path/to/search-script.js');
4});
显然,这意味着在理论上,在搜索框中的焦点和可用的脚本之间存在一个短暂的延迟,在大多数情况下,这不应该是一个问题,在这种情况下,实时搜索一旦脚本完全加载,就会出现。