vue1.0 lazyload
时间: 2023-12-14 07:03:03 浏览: 8
vue-lazyload:一个Vue.js插件,用于在应用程序中延迟加载图像或组件
在 Vue 1.0 中实现图片懒加载可以使用第三方库vue-lazyload。首先需要在页面中引入该库:
```html
<script src="https://cdn.jsdelivr.net/npm/vue-lazyload@1.0.3/vue-lazyload.min.js"></script>
```
然后在 Vue 实例中添加该插件:
```javascript
Vue.use(VueLazyload);
```
接着,在需要进行图片懒加载的img标签上添加v-lazy指令并设置图片的src属性为占位图,例如:
```html
<img v-lazy="image.url" src="placeholder.png">
```
这样,当图片进入可视区域时,插件会自动加载图片的真实地址。同时,也可以设置一些配置项,如占位图、加载失败时显示的图片等等。具体可以查看vue-lazyload官方文档。
阅读全文