vue.js下图片懒加载

HTML
<img src="http://temp.im/110x110" data-src="src" alt="" >
JS
watch: {
  $route: {
      handler(val, oldVal) {
        // 监听组件dom加载完成
        this.$nextTick(() => {
          // 加载首屏
          this.imgLazyLoading()
          window.addEventListener('scroll', () => {
            this.imgLazyLoading()
          })
        })
      },
      deep: true
    }
  },
  methods: {
    /**
     * 全局图片懒加载
     */
    imgLazyLoading() {
      const seeHeight = document.documentElement.clientHeight // 获取可视区域高度
      const scrollTop = document.documentElement.scrollTop || document.body.scrollTop // 获取已经滑动区域的高度
      document.querySelectorAll('img').forEach(el => {
        if (el.attributes['data-src'] && el.src !== el.attributes['data-src'].nodeValue) {
          if (el.offsetTop < seeHeight + scrollTop - 100) {
            var img = document.createElement('img')
            const src = el.src
            img.src = el.attributes['data-src'].nodeValue
            img.onload = (e) => {
              el.src = el.attributes['data-src'].nodeValue
            }
            img.onerror = (e) => {
              el.attributes['data-src'].nodeValue = src
            }
          }
        }
      })
    }
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。