分享一款基于jQuery图片预加载ydxLazyLoad.js代码。这是一款基于ydxLazyLoad.js插件实现的图片延迟加载特效。效果图如下:
在线预览 源码下载
实现的代码。
html代码:
<divclass="main"><
br><divclass="title">图片预加载</div><divclass="content"><divclass="img"><ahref=""><imglazyloadsrc="images/1.jpg"alt=""width="200"height="120"></a><spanclass="loading"></span></div><divclass="img"><ahref=""><imglazyloadsrc="images/2.jpg"alt=""width="200"height="120"></a><spanclass="loading"></span></div><divclass="img"><ahref=""><imglazyloadsrc="images/3.jpg"alt=""width="200"height="120"></a><spanclass="loading"></span></div><divclass="img"><ahref=""><imglazyloadsrc="images/4.jpg"alt=""width="200"height="120"></a><spanclass="loading"></span></div><divclass="img"><ahref=""><imglazyloadsrc="images/5.jpg"alt=""width="200"height="120"></a><spanclass="loading"></span></div><divclass="img"><ahref=""><imglazyloadsrc="images/6.jpg"alt=""width="200"height="120"></a><spanclass="loading"></span></div></div></div>
js代码:
$(function() {
$("[lazyLoadSrc]").YdxLazyLoad({
onShow:function() {
$(this).parent().next().hide()
}
});
});
via:http://www.w2bc.com/article/jquery-img-ydxLazyLoad