# 懒加载原理和实现

# 原理分析

先将img标签的src链接设为同一张图片(默认图片)，当js监听到该图片进入可视窗口时，再将实际地址应用。

# 实现方法

判断元素是否在可视范围

  /**
   * 判断元素是否在可视范围
   */
  function isVisible(ele){
    let windowHeight = window.innerHeight
    let position = ele.getBoundingClientRect()
    // 当元素的top偏移量小于页面大小并且大于高度的负数
    if(position.top<windowHeight && position.top>-position.height){
      return true
    }
    return false
  }

1
2
3
4
5
6
7
8
9
10
11
12

对图片实现懒加载

  /**
   * 对图片进行懒加载
   */
  function lazyLoad(img, src){
    if(img && src && isVisible(img)){ // 元素存在，元素未被加载，元素可见
      setTimeout(function(){
        img.setAttribute('src', src)
      }, 1000) // 模拟网络请求
    }
  }

1
2
3
4
5
6
7
8
9
10

添加滚动监听

  // 窗口滚动
  window.addEventListener('scroll', function(){
    lazyLoad(img, src)
  })

1
2
3
4

# Vue插件实现代码

/**
 * 判断元素可见
 */
function isVisible(el){
  let windowHeight = window.innerHeight
  let position = el.getBoundingClientRect()
  // 当元素的top偏移量小于页面大小并且大于高度的负数
  if(position.top<windowHeight && position.top>-position.height){
    return true
  }
  return false
}

/**
 * 对图片进行懒加载
 */
function lazyLoad(img, src){
  if(img && src && isVisible(img)){ // 元素存在，元素未被加载，元素可见
    setTimeout(function(){
      img.setAttribute('src', src)
    }, 1000) // 模拟网络请求慢的情况
  }
}

export default {
  install(Vue, options){
    Vue.directive('lazy', {
      bind: function(el, binding, vnode){
        el.setAttribute('src', options.loading)
        window.addEventListener('scroll', function(){
          lazyLoad(el, binding.value)
        })
      },
      inserted: function(el, binding, vnode){
        lazyLoad(el)
      }
    })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

main.js

Vue.use(myPlugin, {loading: defaultImg})