拦截HTML导入

何塞·阿

我在网上找不到任何东西。我正在使用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。

超锐利

最好的方法是在服务器端处理文件,例如使用gulpgrunt之类的程序

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


如果您想在客户端运行时处理链接,则可以等待onloadon link(或HTMLImportsLoadedon document事件,但是我想这些事件对于您想要实现的目标触发得太晚了(实际上,这取决于如何设计了不同的Web组件)。


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


一种解决方法是将Web组件移动到一个文件夹中,以便不会在初始相对 href URL中找到它们 (或使用 <base> 具有错误URL元素)。然后,你只需要插入 <link> 需要的时候。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章