<template>
<div class="lazy-load" ref="imgs">
<img class="img" v-for="(item, index) in list" :data-src="item.pic" src="" :key="index" alt=""/>
</div>
</template>
<script>
export default {
name: '',
data() {
return {
list: [
{ pic: 'http://img.hb.aicdn.com/0e9c71359172d3654f74b0d9ccfd1cdf9da1e26e3f4d4-Cabl4Z_fw658' },
{ pic: 'http://img.hb.aicdn.com/8e5782bfef856f909ab0247c893f2a57955f29164977d-ILmCmz_fw658' },
{ pic: 'http://img.hb.aicdn.com/61a68483c74347def88ec415569bd08c49f6e90043f164-67scdL_fw658' },
{ pic: 'http://img.hb.aicdn.com/3a95ee24bf102249d1757d4f97577f50be6cc0d39a2c-ZK2Ym9_fw658' },
{ pic: 'http://img.hb.aicdn.com/dedaa22ac5ac5701d02bae12d57a65112a404edb13787-RQl6MZ_fw658' },
{ pic: 'http://img.hb.aicdn.com/06fd49045a05f304dcbc062323ec04cbb49ba3eaa7292-qWXl9S_fw658' }
]
};
},
components: {},
created() {},
mounted() {
this.$nextTick(() => {
this.lazyFun();
// window.addEventListener('touchstart', this.lazyFun);
// window.addEventListener('touchmove', this.lazyFun);
// window.addEventListener('touchend', this.lazyFun);
});
var throttle = function(delay, interval, fn) {
var startTime = new Date().getTime();
var timer = null;
return function() {
var curTime = new Date().getTime();
clearTimeout(timer);
console.log(curTime - startTime, interval);
if (curTime - startTime >= interval) {
fn.apply(this, arguments);
startTime = curTime;
} else {
timer = setTimeout(fn, delay);
}
};
};
window.addEventListener('touchstart', this.lazyFun);
window.addEventListener('touchmove', throttle(100, 200, this.lazyFun));
window.addEventListener('touchend', this.lazyFun);
},
watch: {},
computed: {},
methods: {
lazyFun() {
const imgs = this.$refs.imgs.children;
for (let i = 0, len = imgs.length; i < len; i++) {
if (imgs[i].getBoundingClientRect().top < document.documentElement.clientHeight) {
let url = imgs[i].getAttribute('data-src');
imgs[i].src = url;
}
}
}
}
};
</script>
<style scoped lang="less" type="text/less">
.img {
display: block;
width: 100vw;
height: 100vh;
}
.lazy-load {
/*height: 120vh;*/
}
</style>
Loading...