路 西
路 西

原生js实现图片懒加载 并实现页面触底加载更多

思路：设置自定义属性绑定到 img 上 src 上绑定load图 当图片处于视口区域时 将自定义属性的 url 替换图片的 url 即可


<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Documenttitle>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    img {
      display: block;
      margin-top: 20px;
      width: 200px;
      height: 200px;
    }
  style>
head>

<body>

  <div class="container" id="container">
    <div class="imgbox" id="imageBox">
      <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2073083920,3302495016&fm=26&gp=0.jpg"
        data-src="https://pic2.zhimg.com/50/v2-2038cd0997d58ff893d433761b90c102_hd.webp" alt="">
    div>
  div>

  <script>
    let num = 10;

    function LoadData() {  // 模拟获取数据
      new Array(num).fill(null).forEach(v => {
        container.innerHTML += `

        
      
`
      })
    }


    function imageLazy() {
      // 获取到窗口的高度和窗口被上滑卷曲的长度
      let $B = window.outerHeight + window.pageYOffset
      Array.from(imageBox).forEach(node => {
        // 获取到目标节点的距离顶点的距离 和元素的高度
        let $A = node.offsetTop + node.clientHeight
        // 获取图片节点
        let imgDom = node.getElementsByTagName('img')[0]

        // 获取到图片节点是否加载的信息
        let imgDomLoad = imgDom.getAttribute('load')

        // 目标节点的距离顶点的距离加上元素的高度 大于  窗口的高度和窗口被上滑卷曲的长度 并且图片未加载
        if ($A <= $B && !imgDomLoad) {
          // 获取到图片的自定义属性的url 添加到图片src中
          imgDom.src = imgDom.getAttribute('data-src')
          // 设置添加属性 标识已经加载过
          imgDom.setAttribute('load', 'true')
        }
      })

    }

    window.onload = function () {  //页面加载完成执行函数
      LoadData()
      imageLazy()
    }
    window.addEventListener('scroll', function () {  // 页面滚动是监听
      let containerH = container.clientHeight
      let $B = window.outerHeight + window.pageYOffset
      if ($B >= containerH) {  // 页面触底加载数据
        LoadData()
      }
      imageLazy()
    })
  script>
body>

html>

以上就是图片懒加载的代码，可直接复制学习

你可能感兴趣的:(javascript,js,css,javascript,html)

按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他