3.3.0 lazyLoad

说明: 用来提升用户体验, 降低服务器开销

使用及参数说明:

new xui.lazyLoad({
    id: string,
    loadingImg: string,
    errorImg: string,
    hrefTarget: string,
    list: array,
});

• id表示lazyLoad的容器 必传
• loadingImg表示图片加载的loading效果, 传入图片的url即可, 默认值为菊花loading图
• errorImg表示图片加载失败的时候显示的图片, 默认值为一张404图片
• hrefTarget表示点击图片的跳转链接(如果有), 默认值为当前页面
• list表示需要加载的图片资源, 数组格式(支持单纯的数组, 对象形式的数组) 必传
• 没有你想要的功能? 快联系我: xumeng0611@gmail.com添加吧

效果展示

默认是栅栏式

1.先来一个最简单的懒加载, 没有那些花里胡哨的配置, 戳我看看

new xui.lazyLoad({
    id: 'lazyLoad',
    list: [
        "http://img.infinitynewtab.com/wallpaper/15.jpg",
        "http://img.infinitynewtab.com/wallpaper/25.jpg",
        "http://img.infinitynewtab.com/wallpaper/35.jpg",
        "http://img.infinitynewtab.com/wallpaper/45.jpg",
        "http://img.infinitynewtab.com/wallpaper/55.jpg",
    ]
});

2.我们可以传入有链接的图片以及一些配置等等, 戳我看看

new xui.lazyLoad({
    id: 'lazyLoad1',
    hrefTarget: '_blank',
    list: 
    [
        {
            href: 'https://xumeng.site/',
            src: 'http://img.infinitynewtab.com/wallpaper/error.jpg'
        },
        {
            href: 'https://xumengzi.gitbooks.io/xui/content/',
            src: 'http://img.infinitynewtab.com/wallpaper/2.jpg'
        },
        {
            href: 'https://github.com/xumengzi',
            src: 'http://img.infinitynewtab.com/wallpaper/3.jpg'
        }
    ]
});