这个插件未压缩版本只有7.62 kb,很精,简支持img标签和background-img资源的lazyload。支持vue。js 1.0和vue。js 2.0
<>强安转
npm安装vue-lazyload美元——保存
<强>使用方法
//main.js
从“Vue”进口Vue//导入VueLazyload
从“vue-lazyload”进口VueLazyload//使用自定义指令
Vue.use (VueLazyload)//使用选项
Vue。使用(VueLazyload, {
预加载:1.3,
错误:“dist/error.png”,
加载:‘dist/loading.gif ',
尝试:1
})
新Vue ({
埃尔:“身体”,
})
之前
& lt; !——your.vue祝辞
& lt; script>
出口默认{
数据(){
返回{
列表:(
“your_images_url”,
“your_images_url”,//可以客户任何图像占位符同时加载或加载失败
{
src:“your_images_url.png”,
错误:“another-error.png”,
加载:“another-loading-spin.svg”
}
]
}
}
}
& lt;/script>
& lt; template>
& lt; div类=癷mg-list”比;
& lt; ul id=叭萜鳌北?
& lt;李v=癷mg在名单”比;
& lt; img v-lazy=癷mg”比;
& lt;/li>
& lt;/ul>
& lt;/div>
& lt;/template>
之前
<强>这里可以定制所有加载中和加载失败加载成功的样式,
& lt; style>
img(懒=加载){/* */你的风格
}
img[懒=错误]{/* */你的风格
}，
img(懒=加载){/* */你的风格
}/*
或背景图像
*/.yourclass(懒=加载){/* */你的风格
}
.yourclass[懒=错误]{/* */你的风格
}，
.yourclass(懒=加载){/* */你的风格
}
& lt;/style>
之前
<强> API
选项
参数个数
类型
细节
预加载
数量
预装高度的比例
错误
字符串
错误img src
加载
字符串
加载img src
尝试
数量
尝试计数
演示下载地址:vue-lazyloadz_jb51。rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
