delayLoad新组件

可以实现动态加载第二屏幕以下的图片，即随用户滚动页面的时候加载图片，该组件适用以下场景，当你想能尽量的触发页面onload，不想加载临时用户不会用的数据时候：

滚动加载图片、iframe等；
滚动加载DOM元素背景图片,动态插入class；
页面滚动到某个dom的时候执行一个事件，可以动态载入数据、html等等

与旧的版本，这个组件有哪些改变：

使用IntersectionObserver替换了原来的scroll事件和getBoundingClientRect；
使用更合理的dataset，delayload => data-delay;
新增了加载超级大图decode和多线程web worker载入形式;
如果浏览器不支持IntersectionObserver会切换到旧版本，旧版本只修改了自定义属性，兼容了新版的data-delay;
其他代码上的适应时代的优化；

有考虑未来可能会加入的，随缘：

模块化支持；
对视频video、source、picture的动态加载支持；
对srcset、poster的支持；
可自定义，对每个监控dom绑定自定义事件；

[warning] 注意

新旧版本不兼容，对IntersectionObserver不支持的浏览器会做降级处理，但也不支持新版的新特性；

delyload组件无须依赖

组件CDN

<script src="//game.gtimg.cn/images/js/comm/delayload-min.js"></script>
<script>delyLoad.init()</script>

常规图片

data-dely="图片地址"

图片建议需要先定义宽高，注意，目标暂时不支持srcset、poster

<img 
    data-dely="https://ossweb-img.qq.com/images/cf/act/a2009101national_day/nd_s_top.jpg" 
    width="1600" height="92" >
<img 
    data-dely="//ossweb-img.qq.com/images/cf/act/a2009101national_day/nd_s_bg01.jpg" 
    width="1600" height="137" >
<img 
    data-dely="https://picsum.photos/id/1003/1181/1772" 
    width="916" height="611"/>

超大图片

data-dely="图片地址" data-dely-configs="{...}"

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

<img 
    data-dely="https://usdawatercolors.nal.usda.gov/pom/download.xhtml?id=POM00007435" 
    data-dely-configs="{load:'decode',thumb:'https://usdawatercolors.nal.usda.gov/download/POM00007435/thumbnail'}" 
    width="1000" 
    height="2000"/>

<img 
    data-dely="https://picsum.photos/id/10/2500/1667" 
    data-dely-configs="{load:'decode'}"
    width="1600" 
    height="1000" 
    />

web worker加载

data-dely="图片地址"
data-dely-configs="{...}"

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

<img 
    data-dely="POM00000120.jpg" 
    data-dely-configs="{load:'worker',thumb:'https://usdawatercolors.nal.usda.gov/download/POM00000120/thumbnail'}"
    width="1000" 
    height="2000">
<img 
    data-dely="POM00007435.jpg" 
    data-dely-configs="{load:'worker',thumb:'https://usdawatercolors.nal.usda.gov/download/POM00007435/thumbnail'}" 
    width="1000" 
    height="2000">

css图片加载

data-dely="class name" data-dely-configs="{...}"

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

<style>
.b1{height:119px}.b2{height:144px}.b3{height:137px}.b4{height:137px}.b5{height:253px}
.d1{background:url(//ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_01.jpg) no-repeat 0 0}
.d2{background:url(//ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_02.jpg) no-repeat 0 0}
.d3{background:url(//ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_03.jpg) no-repeat 0 0}
.d4{background:url(//ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_04.jpg) no-repeat 0 0}
.d5{background:url(https://ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_05.jpg) no-repeat 0 0}
</style>

<div class="b1" data-dely="d1" data-dely-configs="{type:'cls'}"></div>
<div class="b2" data-dely="d2" data-dely-configs="{type:'cls'}"></div>
<div class="b3" data-dely="d3" data-dely-configs="{type:'cls'}"></div>
<div class="b4" data-dely="d4" data-dely-configs="{type:'cls'}"></div>
<div class="b5" data-dely="d5" data-dely-configs="{type:'cls'}"></div>

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

data-dely="function name" data-dely-configs="{...}"

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

<div 
    data-dely="hi('hihihihihi')" 
    data-dely-configs="{type:'func'}">这里会把hi('hihihihihi')里面的字符串写入到后面的div中：</div>

<div style="height:200px;" id="my"></div>

<script>
 function hi(s){    
     document.getElementById("my").innerHTML=s
    }
</script>

其他src

data-dely="src"

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

<iframe 
    width="202" 
    scrolling="no" 
    height="170" 
    frameborder="0" 
    data-dely="//cf.qq.com/web200905/inc/ifr_shop_new.htm" 
    allowtransparency="true"></iframe>

DEMO示例;

延迟加载2019