vue1.0 lazyload
时间: 2023-08-22 12:09:28 浏览: 33
在Vue.js 1.0中实现图片的懒加载可以通过以下步骤:
1. 在Vue实例中定义一个指令,例如`v-lazy`。
```javascript
Vue.directive('lazy', {
bind: function () {
var img = new Image()
var self = this
img.onload = function () {
self.el.setAttribute('src', self.expression)
}
img.src = this.expression
}
})
```
2. 在img标签上使用该指令。
```html
<img v-lazy="imgSrc">
```
其中,`imgSrc`是图片的真实地址。
3. 在页面滚动时,判断图片是否在可视区域内,如果是则加载图片。
```javascript
window.onscroll = function () {
var lazyImages = document.querySelectorAll('img[v-lazy]')
for (var i = 0; i < lazyImages.length; i++) {
if (lazyImages[i].getBoundingClientRect().top < window.innerHeight) {
lazyImages[i].setAttribute('src', lazyImages[i].getAttribute('v-lazy'))
lazyImages[i].removeAttribute('v-lazy')
}
}
}
```
以上是一个简单的懒加载实现方式,但需要注意的是,在Vue.js 2.0中,指令的写法和使用方式都有所改变。