开始使用 布局容器和栅格系统 文字样式 背景颜色 按钮 标签、角标、红点 图标 单选、多选、开关 进度条 顶部导航 底部工具栏 底部工具栏扩展 表单 列表 卡片列表 宫格布局 弹性布局 时间轴 聊天气泡 信息条 提示条 仿微信首页 仿微信朋友圈 仿今日头条 仿知乎首页 仿淘宝首页 会员中心首页一 会员中心首页二 订单列表首页 弹窗 Dialog 弹窗 Toast 弹出菜单 底部弹出框 底部分享盒子 下拉刷新 轮播组件 滚动监听 按钮组工具栏 搜索条 滑块 Tab切换栏 折叠面板 图片懒加载 自定义主题样式 列表左滑删除

图片懒加载

使用图片懒加载需要先载入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>