嗞嗞嗞~ 你的浏览器仿佛在对我微笑!

YDUI Touch Docs 返回首页

LazyLoad

1、说明

1.1、普通图片延迟加载插件;LazyLoad 仅支持Javascript API方式调用;

2、参数

2.1、包含3个参数(lazy的l是小写,Load的L是大写 ~_~):

<script>
$('img').lazyLoad({
attr: 'data-url', /* 真实图片路径属性,默认data-url */
binder: window, /* 绑定的滚动容器,默认为window */
placeholder: '' /* 默认显示图片,未指定src属性生效 */
});
</script>

3、使用

3.1、给需要延迟加载的图片元素绑定事件即可;

<img class="lazy" data-url="../img/example.jpg" />
<script>
$('img.lazy').lazyLoad();
</script>

3.2、参数

<div id="J_Container" style="height: 500px;width: 100%;overflow-y: scroll;">
<img class="lazy" data-lalala="../img/example1.jpg" />
<img class="lazy" data-lalala="../img/example2.jpg" />
<img class="lazy" data-lalala="../img/example3.jpg" />
</div>
<script>
$('img.lazy').lazyLoad({
attr: 'data-lalala', /* 指定真实图片路径属性 */
binder: '#J_Container', /* 当图片元素在#J_Container容器内可见时,加载图片 */
placeholder: '../img/default_goods.jpg' /* 图片加载完成前显示 */
});
</script>

4、参与讨论

4.1、有任何使用问题,请在评论中留言,也欢迎大家发表意见、建议。感谢您对YDUI的支持。