我在网上找不到任何东西。我正在使用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。
最好的方法是在服务器端处理文件,例如使用gulp或grunt之类的程序。
你可以替换属性rel='import'
的的<link>
用自己的自定义名称的元素,例如rel='lazy-import'
,然后处理它们在浏览器中自己的模块加载器。
如果您想在客户端运行时处理链接,则可以等待onload
on link
(或HTMLImportsLoaded
on document
)上的事件,但是我想这些事件对于您想要实现的目标触发得太晚了(实际上,这取决于如何设计了不同的Web组件)。
但是,使用polyfill(对于Firefox和Internet Explorer)是可行的,因为您可以修补实现XMLHttpRequest
调用的代码。不幸的是,它不适用于Chrome和Opera,因为它们<link>
是本地解析和处理的<script>
,并且导入的文件中的in会在下载后立即执行。
href
URL中找到它们 (或使用 <base>
具有错误URL的 元素)。然后,你只需要插入 好 <link>
需要的时候。
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句