美文网首页
intersectionObserver实现无限加载和懒加载

intersectionObserver实现无限加载和懒加载

作者: 真是个非常帅气的昵称呢 | 来源:发表于2020-07-01 10:30 被阅读0次
<body>
  <ul id="ul">
  </ul>
  <h5 id="load">加载完</h5>
  <script>
    const surveyNo = getQueryString('surveyNo')
    let page = 0, maxPage = 1
    var io = new IntersectionObserver(entries => {
      if (entries[0].intersectionRatio <= 0) return
      if (page < maxPage) {
        page++
        getList()
      }
    })
    io.observe(document.getElementById('load'))
    var observer = new IntersectionObserver(changes => {
      changes.forEach(ele => {
        var img = ele.target
        img.setAttribute('src', img.dataset.src)
      })
    })
    function query(selector) {
      return Array.from(document.querySelectorAll(selector))
    }
    function getList() {
      $.ajax({
        type: 'get',
        url: '/vote/web/getListPage/' + surveyNo,
        data: { orderBy: 'vote', page: page, aliyunVideo: 1, perPage: 5 },
        dataType: 'json',
        async: false,
        success: function (res) {
          if (res.success) {
            maxPage = res.data.maxPage
            render(res.data.items)
          }
        },
        error: function () {

        }
      })
    }
    function render(data) {
      var html = ''
      data.forEach(element => {
        html += `<li><img class='lazy'
          src="http://att2.citysbs.com/hangzhou/2019/10/17/15/middle_100x100-153616_v2_16831571297776186_8bd531471b03fc5a1eea6b9c332ed0e3.png"
          data-src='${element.picUrl}'></li>`
      });
      $('#ul').append(html)
      query('.lazy').forEach(item => {
        observer.observe(item)
      })
    }
    function getQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) return decodeURI(r[2]);
      return '';
    }
  </script>

</body>

相关文章

网友评论

      本文标题:intersectionObserver实现无限加载和懒加载

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