delayLoad组件
可以实现动态加载第二屏幕以下的图片，即随用户滚动页面的时候加载图片，该组件适用与以下场景：
- 动态加载图片
- 动态加载DOM元素背景图片
- 页面滚动到某个dom的时候执行绑定该dom的事件
[warning] 注意
- 为需要动态加载的DOM元素添加 delayLoad 属性，属性的值可以是图片地址、样式名或函数名；
milo版本使用说明
示例代码
<body>
<!-- 图片 延迟加载 -->
<img src="javascript:" width="1000" height="119" delayLoad="//ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_01.jpg" />
<!-- 背景图片 延迟加载 -->
<div delayload="//ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_01.jpg" style="height: 119px;"></div>
<!-- 样式 延迟加载 -->
<div delayload="d1" class="b1"></div>
<!-- 在延迟加载的DOM元素上，绑定一个函数 -->
<div id="testIframe"></div>
<script src="//ossweb-img.qq.com/images/js/milo_bundle/milo.js"></script>
<script>
// 引入delayLoad组件
need(["biz.delayLoad"]);
// milo版本特有接口：在延迟加载的DOM元素上，绑定一个函数
function test(){
var o=document.getElementById('testIframe');
o.innerHTML='<iframe width="202" scrolling="no" height="170" frameborder="0" src="//cf.qq.com/web200905/inc/ifr_shop_new.htm " allowtransparency="true"></iframe>';
}
need(["biz.delayLoad"],function(D){
// 延迟加载函数
D.lazyLoad(g("testIframe"),test);
});
</script>
</body>
接口说明
lazyLoad(ele,function(){})
- ele 需要延迟加载的DOM对象
- function(){} 可以使用匿名函数，也可以是一个函数名；
独立delayLoad版本
组件CDN
<script src="//ossweb-img.qq.com/images/js/comm/delayImage.min.js"></script>
示例代码
<head>
<style>
.b1{height:119px;background-position:0 0;background-repeat:no-repeat}
.d1{background-image:url(//ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_01.jpg)}
</style>
</head>
<body>
<!-- 图片 延迟加载 -->
<img src="javascript:" height="119" width="100">
<!-- 背景图片 延迟加载 -->
<div delayload="//ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_01.jpg" style="height: 119px;"></div>
<!-- 样式 延迟加载 -->
<div delayload="d1" class="b1"></div>
<!-- 方法 延迟加载 -->
<div id="iframeWrap" delayload="loadIframe()"></div>
<script src="//ossweb-img.qq.com/images/js/comm/delayImage.min.js"></script>
<script></script>
</body>