+ 只有进入(即将进入)可是区域的图片才进行加载
+ 如果没有进入可视区域的图片不进行加载
问题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()
}