vue 图片懒加载

最新推荐文章于 2023-08-12 16:54:25 发布

BYh_blog

最新推荐文章于 2023-08-12 16:54:25 发布

阅读量240

点赞数

分类专栏： vue.js

本文链接：https://blog.csdn.net/byhage1/article/details/103808896

版权

vue.js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>

BYh_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue 图片懒加载

<!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-Comp...
复制链接

扫一扫

专栏目录