美文网首页
图片懒加载

图片懒加载

作者: 砚婉儿 | 来源:发表于2020-10-13 13:19 被阅读0次

    可以给img标签统一自定义属性 data-src='default.png'
    当检测到图片出现在窗口之后再补充 src 属性,此时才会进行图片资源加载。

    方法:

    // <img src="default.png" data-src="https://xxxx/real.png">
    function isVisible(el) {
      const position = el.getBoundingClientRect()
      const windowHeight = document.documentElement.clientHeight
      // 顶部边缘可见
      const topVisible = position.top > 0 && position.top < windowHeight;
      // 底部边缘可见
      const bottomVisible = position.bottom < windowHeight && position.bottom > 0;
      return topVisible || bottomVisible;
    }
    
    function imageLazyLoad() {
      const images = document.querySelectorAll('img')
      for (let img of images) {
        const realSrc = img.dataset.src
        if (!realSrc) continue
        if (isVisible(img)) {
          img.src = realSrc
          img.dataset.src = ''
        }
      }
    }
    
    // 测试
    window.addEventListener('load', imageLazyLoad)
    window.addEventListener('scroll', imageLazyLoad)
    // or
    window.addEventListener('scroll', throttle(imageLazyLoad, 1000))
    

    相关文章

      网友评论

          本文标题:图片懒加载

          本文链接:https://www.haomeiwen.com/subject/xzxjpktx.html