delayload demo 示意

1、常规图片：

data-dely="图片地址" ----图片建议需要先定义宽高，注意，目标暂时不支持srcset、poster

2、超大图片：

data-dely="图片地址"

data-dely-configs="{...}" ----配置

• load:'decode' ----表示用decode方式载入图片，超大图可以打开此配置，比常规加载稍快一点点且不那么容易阻塞后续资源加载。注意一般常规图片没必要开启，如果decode不支持或加载失败，会切换到常规加载
• thumb:'小图地址' ----可选，在decode的时候图片会显示空白，可先加载一张小图，超大图加载后替换
• 缺陷：有小许浏览器兼容性问题，和加载的时候目标图片dom会显示空白，所以建议一起把thumb写上。

3、web worker加载：

data-dely="图片地址"

data-dely-configs="{...}" ----配置

• load:'worker' ----表示启用多线程方式载入图片，超大图、超多图、容易卡屏的时候可以打开此配置，注意一般常规图片完全没必要开启
• thumb:'小图地址' ----可选，在decode的时候图片会显示空白，可先加载一张小图，源图加载后替换
• 缺陷：仅限同源，xx效果可能大于实际效果，使用场景有限。

4、css图片加载：

data-dely="class name"

data-dely-configs="{...}" ----配置

• type:'cls' ----把结构css和背景css分开，有背景图片的css等in view的时候在插入加载图片

5、in view 的时候执行某个方法（function）：

data-dely="function name"

data-dely-configs="{...}" ----配置

• type:'func' ----定义一个函数，当目标dom in view的时候执行。如可以在页面上把某些数据、dom等装载到某个自定义标签或textarea里面，定义一个函数当屏幕滚动到目标dom的时候，执行函数，把前面标签里面的文本innerHTML，当然，也可以干点别的

6、其他src：

data-dely="src"

• data-dely="iframe的src，等，也是可行的，不过video暂时不支持，这些都有成熟的插件载入，意义不大"