以下是使用
cdn引入
vue-lazyload的demo示例代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>
Vue Lazyload Demo</title>
<script src="https://
cdn.jsd
elivr.net/npm/
vue/dist/
vue.js"></script> <!-- 引入
Vue.js -->
<script src="https://
cdn.jsd
elivr.net/npm/
vue-lazyload@1.3.3/
vue-lazyload.js"></script> <!-- 引入
vue-lazyload.js -->
<style>
.
image-wrapper {
width: 300px;
height: 300px;
margin: 20px;
overflow: hidden;
position: r
elative;
}
.
image-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.
image-wrapper .loading {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #eee;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body>
<div id="app">
<div class="
image-wrapper" v-for="img in
images" :key="img">
<img v-lazy="img" @load="onLoad" @error="onError">
<div class="loading" v-if="!loaded">
<span>Loading...</span>
</div>
</div>
</div>
<script>
Vue.use(
VueLazyload, {
pr
eLoad: 1.3,
error: 'https://via.placeholder.com/300x300.png?text=Error',
loading: 'https://via.placeholder.com/300x300.png?text=Loading',
attempt: 1
});
new
Vue({
el: '#app',
data: {
images: [
'https://picsum.photos/300/300?
image=100',
'https://picsum.photos/300/300?
image=200',
'https://picsum.photos/300/300?
image=300',
'https://picsum.photos/300/300?
image=400',
'https://picsum.photos/300/300?
image=500'
],
loaded: false
},
methods: {
onLoad() {
this.loaded = true;
},
onError() {
console.log('Error loading
image');
}
}
});
</script>
</body>
</html>
```
在上述代码中，首先引入了
Vue.js和
vue-lazyload.js的
CDN链接。然后，使用
Vue.use()方法来安装
vue-lazyload插件，并配置了一些选项，如预加载距离、加载失败和加载中的图片链接、尝试次数等。
接着，创建了一个
Vue实例，并在data中定义了一个
images数组，其中包含了5张图片的链接。在模板中使用v-for指令遍历
images数组，并将每个图片链接绑定到img元素的v-lazy属性上，这样就可以
实现图片懒加载。同时，还添加了一个loading属性，用来标识图片是否已加载完成，以便在图片加载过程中显示加载中的提示。
最后，在
Vue实例中定义了onLoad和onError两个方法，分别用来处理图片加载成功和失败的情况。在onLoad方法中，将loading属性设置为true，表示图片已加载完成，从而隐藏加载中的提示。在onError方法中，则简单地打印了一条错误信息。
整个示例中，使用了
vue-lazyload插件提供的v-lazy指令来
实现图片懒加载，并且对插件的配置选项进行了一些自定义。通过这个示例，可以方便地了解和使用
vue-lazyload插件。
884
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
