图片懒加载
使用图片懒加载需要先载入JS文件:
<script src="/static/auicss/script/aui-lazyload.js"></script>
使用之前需要先实例化对象 var lazyload = new auiLazyload(options);
,options参数如下:
options: {
errorImage: '', // 图片加载失败时显示的图片
}
实例化 auiLazyload
时会自动检测所有 IMG
标签,只有包含 data-src
属性的图片才会被懒加载。
示例源码
<div class="aui-content aui-margin-b-15">
<ul class="aui-list aui-media-list">
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/1.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/4.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">图片路径没有找到时显示</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/3.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/3.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/1.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/2.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/3.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/4.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/1.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/2.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/3.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/4.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/1.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/2.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/3.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/4.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/1.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/2.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/3.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/4.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/1.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/2.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/3.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/4.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/1.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/2.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/3.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
<li class="aui-list-item">
<div class="aui-media-list-item-inner">
<div class="aui-list-item-media" style="width:6rem">
<img src="/static/auicss/img/load-img.png" data-src="/static/auicss/img/demo/3.jpg">
</div>
<div class="aui-list-item-inner">
<div class="aui-list-item-text">
<div class="aui-list-item-title">带有媒体的列表</div>
</div>
</div>
</div>
</li>
</ul>
</div>
<script type="text/javascript" src="/static/auicss/script/aui-lazyload.js" ></script>
<script type="text/javascript">
new auiLazyload({
errorImage:'/static/auicss/img/error-img.png'
});
</script>