手写图片懒加载

图片懒加载：img.src = 'xxx' 由于网络请求需要一定时间，会导致图片位置在加载过程中空白，故可以在图片加载中，先显示一个 <code>loading</code> 图片，待真正的图片加载完成，再显示。

注意

封装一个支付 promise 的图片加载方法，如: loadImg('https://avatars.githubusercontent.com/u/26007970?v=4').then(() => { })

答：

function loadImg(src) {
  return new Promise((resolve, reject) => {
    const img = new Image()
    img.onload = function() {
      resolve({
        width: img.width,
        height: img.height
      })
    }
    img.onerror = function(e) {
      console.log('load src error', src)
      reject(e)
    }
    img.src = src
  })
}

// 测试
loadImg('https://avatars.githubusercontent.com/u/26007970?v=4').then(res => {
  console.log('res', res) // {width: 62, height: 62}
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

很简洁的代码吧😄, 这里加了点优化，loadImg 能返回图片的相关信息，如宽和高

注意

实现图片懒加载

答：在调用<code>lazyLoad(dom, src)</code>时，就需要给dom.src = 'xxx' 先赋值为 loading 图片

function lazyLoad(dom, src) {
  const errorSrc = 'https://www.computerhope.com/jargon/e/error.png'
  const loadSrc = 'https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif'
  const img = new Image()
  img.onload = function() {
   dom.src = src 
  }
  img.onerror = function() {
    dom.src = errorSrc
  }
  img.src = src
  dom.src = loadSrc
}

// 测试
const dom = document.getElementById('lazy-load-img')
lazyLoad(dom, src)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

优化：每次调用lazyLoad都会生成 errorSrc, loadSrc, img 变量。这些变量能否只生成一次就好了？

const lazyLoad = (function(src) {
  const errorSrc = 'https://www.computerhope.com/jargon/e/error.png'
  const loadSrc = 'https://media0.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif'
  const dom = document.getElementById('lazy-load-img')
  const img = new Image()
  img.onload = function() {
   dom.src = src 
  }
  img.onerror = function() {
    dom.src = errorSrc
  }
  return {
    setSrc: function(src) {
      img.src = src
      dom.src = loadSrc
    }
  }
})()

// 测试
lazyLoad.setSrc(src)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<button id="reload-button">重新加载图片</button>

编辑

上次更新: 2025/07/12, 10:46:19

← 手写事件委托手写原生Ajax请求→