Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

长页面内容的Lazyload

  瀑布流的一个优点就是让更多数据在需要浏览时才加载,但瀑布流本身的适用范围有限。而且这个特性也不是瀑布流独有的,说白了就是对内容的Lazyload。对图片的Lazyload已经非常普及了,但对内容数据的Lazyload涉及的面更广,所以普及率还不高。
  对图片的Lazyload很容易实现,只要后端输出IMG标签时不直接使用src属性,前端程序判断用户滚动到某张图片时再设置其src属性就能做到。而且图片在页面上显示时尺寸通常都由布局来限制,所以在加载之前图片可以用一个固定尺寸的占位符代替。或者即使CSS中不固定尺寸也可以直接在服务器输出原始源时给IMG标签加上尺寸。
  对内容的Lazyload就比这个复杂的多。首先后端要提供数据接口,这些数据一开始就不被传输到页面上(SEO要另外考虑)。而且数据尺寸很难固定计算,需要在做页面布局时就考虑数据的尺寸问题,比如使用固定宽度高度的布局,以便处理数据填入前的占位符。瀑布流就是因为没有占位符,对滚动条的影响太大,才在很多场景中不适用的。除了占位符问题外,还有特效处理的问题。因为插入的是内容,难免有一些JS实现的特效,比如插入的内容是一个幻灯片效果之类的。由于初始不加载,当然也就不能直接在页面代码中处理这些特效。可能需要在加载这些内容的同时加载相应的SCRIPT标签来实现,但DOM元素的选取又成了个问题。
  使用document.currentScript可以选取到当前代码所在的SCRIPT,然后可以从这个SCRIPT的邻近节点找到插入的内容,从而对内容实现相应的特效。只是这个属性在低版本IE上不支持,而且“邻近节点”的关系太模糊,依然不太容易使用。如果不考虑IE,直接引入ShadowDOM的话,很多问题就可以迎刃而解。比如可以把需要Lazyload的部分做成ShadowDOM,这些元素在被浏览或将要被浏览时才触发加载。元素的选取就可以直接从shadowRoot开始了,而且还能避开不必要的CSS影响。
  总之,内容的Lazyload在考虑低版本IE的情况下实现还是有点麻烦的,但将来WebComponents普及的话它应该也会普及起来。
网名:
54.144.24.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^