<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<title>Document</title>
</head>
<body>
<div id="app">
<div ref='imgs'>
<img style="width: 50%;" class="imgs" v-for="(item,index) in datas" :key="index" :src="item.src" alt="" :data-src="item.dataSrc">
</div>
</div>
</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
datas = [
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/d4433b800f3f1c2ece929876c8230df6.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/4eaef1d8851e03c3c4fe0bbb88aa01e8.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/c65d2cb5cffc0007acf8934f30ff6da2.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/0c9f7aa0f7d5129525d7badfa19e7dbf.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/5c0ff69f2a295a4dfb0f4edc03431ab2.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/a82ac2c7b73cc6eff672e3932dc36eb5.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/510bf0cff7987f7fd5edee3592115b4a.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/510bf0cff7987f7fd5edee3592115b4a.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/510bf0cff7987f7fd5edee3592115b4a.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/ae83259c505a4bce741023517b9af921.jpeg'
},{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/ae83259c505a4bce741023517b9af921.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/ae83259c505a4bce741023517b9af921.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/ae83259c505a4bce741023517b9af921.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/a82ac2c7b73cc6eff672e3932dc36eb5.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/a82ac2c7b73cc6eff672e3932dc36eb5.jpeg'
},
{
src: 'http://www.17qq.com/img_qqtouxiang/79911930.jpeg',
dataSrc: 'https://ali.image.hellorf.com/images/a82ac2c7b73cc6eff672e3932dc36eb5.jpeg'
}
]
new Vue({
el: '#app',
data: function() {
return {
datas
}
},
mounted() {
window.addEventListener('scroll', this.scrollHandle); // 绑定页面的滚动事件
this.show()
},
methods: {
scrollHandle() {
const imgs = document.querySelectorAll('.imgs')
const scrollTop = document.body.scrollTop || document.documentElement.scrollTop
const height = window.innerHeight
imgs.forEach(img=>{
const imgTop = img.getBoundingClientRect().top
if(imgTop <= height) {
setTimeout( ()=>{
img.setAttribute('src',img.getAttribute('data-src'))
},2000)
}
})
},
show() {
this.$refs.imgs.scrollTop = 10
}
},
})
</script>
</html>
vue 图片懒加载
最新推荐文章于 2023-08-12 16:54:25 发布