lazyload实现思路

要 lazyload的图片,其 src 不能指向真实图片地址。因为,如果img.src有了,则无论将 img 怎么藏,都会马上发起图片请求。
通常要将图片的真实src放到一个自定义属性里,并在 src 里放入一个占位图地址。在必要的时候,将 src 的值替换为真实地址,就实现了 lazyload
首先是要确定对哪些图片进行 lazyload,通常是通过选择器如: #cont img ,来获取要进行 lazyload 的图片
图片容器默认是 document.documentElement (但它没有 onscroll 事件。)
将目标图片,容器分别看作一个矩形,当两个矩形发生相交时,则表示图片出现在了容器可见区域,则可以 load 图片了。我在网上搜了一个 “判断两个矩形相交”的算法,见源码
加入这个算法,也就能保证,无论是从上往下滚,还是反之,还是左右滚动,都能触发 load。

一些注意事项

  1. load之前的图片状态。通常会用一个“占位”图片来做为默认src地址,可以是个 base64码。因为,如果 img.src 为空,chrome 下会自动隐藏图片
  2. load之前的图片,如果有宽高信息,就最好了。如果没有宽高信息,则load开始时,会有抖动现象,容器的宽高也会发生变化。

注:本示例页在IE下表现很烂,因为使用了 flex 布局
水平滚动图片容器
图片容器