2

我在网上找不到任何东西。我正在使用 Polymer 1.6，并且正在尝试对元素进行延迟加载。到目前为止，我已经成功地延迟加载它们并且速度大大提高了。

我正在做 App Shell 架构，我在其中捆绑（通过缩小和硫化）导航栏和抽屉工作所需的所有脚本。但是，一旦我这样做了，就会有许多 HTML 导入是 App Shell 的一部分，它们将被调用，因为它们的名称不同。

我可以从我的元素中删除 HTML 导入，但这很容易出错。注意：我知道 HTML 导入只执行一次，但由于它们是包的一部分，浏览器不知道如何阻止它的加载。

所以我想做的是拦截 HTML 导入，检查元素是否是 App Shell 的一部分，如果它已经存在则阻止它的加载。

像这样的东西：

 var appShellComponents : [
    'polymer'
    'my-navbar',
    'paper-button',
    'app-drawer'

    document.addEventListener('HTMLImportEvent', function(event){
       //Untested code below
         var href = event.srcTarget.href;
         var component = href.substr(href.lastIndexOf('/').replace('.html','');
        if(appShellComponents.indexOf(component) > -1){
         //Element has been loaded, reject the import. 
            return;
           }

    });

我还需要一种方法来使用其他浏览器，例如 Firefox。显然 Polymer 使用了一个调用 AJAX 的 polyfill。

4

1 回答 1

1

最好的方法是在服务器端处理文件，例如使用gulp或grunt之类的程序。

您可以将元素的属性替换为rel='import'您<link>自己的自定义名称，例如rel='lazy-import'，然后在浏览器中使用您自己的模块加载器处理它们。

如果您想在客户端在运行时处理链接，您可以等待onload事件 on link（或HTMLImportsLoadedon document），但我想这些事件对于您想要实现的目标来说太晚了（实际上这取决于设计了不同的 Web 组件）。

但是使用 polyfill（对于 Firefox 和 Internet Explorer），这是可能的，因为您可以修补实现XMLHttpRequest调用的代码。不幸的是，它不适用于 Chrome 和 Opera，因为它们<link>是本地解析和处理的<script>，并且导入的文件在下载时会立即执行。

一种解决方法可能是将 Web 组件移动到一个文件夹中，这样就不会使用初始相对hrefURL 找到它们（或使用<base>具有错误 url 的元素）。然后你只需要在需要时插入good <link>。

于 2016-09-02T16:57:34.167 回答