案例--图片懒加载

  + 只有进入(即将进入)可是区域的图片才进行加载

  + 如果没有进入可视区域的图片不进行加载

问题1: 如果你希望实现图片懒加载, 那么渲染页面的时候, img 的 src 还能写吗 ?

  + 不能

  + 但是有需要直到该 img 标签应该引入的是哪一张图片

  + 所以我们以一个自定义属性的形式, 来把该 img 需要的图片地址记录在标签身上

问题2: 获取元素

  + 不能在全局获取

// 1. 渲染页面
const ul = document.querySelector('ul')

bindHtml()
function bindHtml() {
  let str = ''
  list.forEach(item => {
    str += `<li><img src="${ item.pic }" alt=""></li>`
  })
  ul.innerHTML = str

  // 只要渲染完毕页面, 执行 lazyload
  lazyload()
}

// 2. 实现图片懒加载
function lazyload() {
  const imgs = ul.querySelectorAll('img')

  // 2-1. 遍历拿到每一个 img
  imgs.forEach(item => {
    // 优化处理
    // item 就是每一个 img 标签
    // 如果这个 img 标签已经有 src 属性了, 说明已经加载过了
    // 还需要去判断高度吗?
    if (item.src) return

    // 2-2. 拿到每一个图片距离顶部的尺寸
    const img_top = item.offsetTop
    const window_height = document.documentElement.clientHeight
    const scroll_top = document.documentElement.scrollTop || document.body.scrollTop

    // 2-3. 判断某一张图片进入页面了
    if (img_top - 50 <= window_height + scroll_top) {
      // 需要加载当前这一张图片了
      item.src = item.dataset.src

      // 问题3: 当你第一次滚动的时候, 遍历所有图片
      // 当你向下滚动的时候, 前面的图片已经加载过了
      // 你再次遍历的时候还需要遍历吗 ? 不需要了
    }
  })
}

// 要求 lazyload 随着浏览器的滚动随时执行
window.onscroll = function () {
  lazyload()
}