JS 原生使用Ajax实现数据图片懒加载

stephen Curry_

于 2022-10-06 17:18:18 发布

阅读量297

点赞数

文章标签： javascript ajax 前端

本文链接：https://blog.csdn.net/m0_65544665/article/details/127185365

版权

效果图：

代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .top {
        padding-bottom: 8px;
        border-bottom: 2px solid Orange;
        color: Orange;
        font-size: 16px;
        font-weight: normal;
        margin: 40px 20px;
      }
      .top > span > .fc1 {
        font-size: 12px;
        color: red;
      }
      span {
        font-size: 12px;
        color: #666666;
      }
      ul {
        width: 1300px;
        margin: 0 auto;
      }
      ul::after {
        content: "";
        display: block;
        clear: both;
      }
      .box > li {
        width: 250px;
        height: 500px;
        padding: 15px 20px;
        box-sizing: border-box;
        border: 1px solid #999;
        float: left;
        list-style: none;
        margin-left: 60px;
        margin-bottom: 40px;
      }
      .box > li > img {
        width: 200px;
        height: 380px;
      }
      .box > li > p {
        margin-top: 10px;
        font-size: 12px;
        color: #999;
      }
      .over {
        width: 500px;
        height: 40px;
        text-align: center;
        color: white;
        background-color: green;
        font-size: 14px;
        line-height: 40px;
        border-radius: 5px;
        margin: 0 auto;
      }
      .loding {
        width: 30px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50% -50%);
      }
    </style>
  </head>
  <body>
    <div class="top">
      积分商城&nbsp;
      <span>
        <span class="fc1"> 100</span> 彩贝=¥
        <span class="fc1">1.00</span>元</span
      >
    </div>
    <!-- <div class="over">数据加载完毕</div> -->
    <img class="loding" src="./img/loding.gif" />
  </body>
</html>
<script>
  var dataList = [];
  function getData() {
    var ajax_ = new XMLHttpRequest() || new ActiveXObject("Microsoft.XMLHTTP");
    ajax_.open("get", "./data.json");
    ajax_.send();
    ajax_.onreadystatechange = function () {
      if (ajax_.readyState == 4) {
        if (ajax_.status == 200) {
          var data = JSON.parse(ajax_.responseText).data;
          dataList = data;
          show();
        } else {
          console.log("加载错误");
        }
      }
    };
  }
  setTimeout(getData, 1500);
  var flg = true;
  var body_ = document.body;
  var index = -1;
  var loading_ = document.getElementsByClassName("loding")[0];
  function show() {
    if (flg) {
      index++;
      if (index >= dataList.length) {
        var div_ = document.createElement("div");
        div_.setAttribute("class", "over");
        body_.appendChild(div_);
        div_.innerHTML = "数据加载完毕";
        return (flg = false);
      }
      if (!ul_) {
        loading_.style.display = "block";
      }
      var ul_ = document.createElement("ul");
      ul_.setAttribute("class", "box");
      for (var item of dataList[index]) {
        var li_ = document.createElement("li");
        var img_ = document.createElement("img");
        img_.setAttribute("class", "pic");
        img_.src = item.src;
        var p_ = document.createElement("p");
        p_.setAttribute("class", "title");
        p_.innerHTML = item.title;
        li_.appendChild(img_);
        li_.appendChild(p_);
        ul_.appendChild(li_);
      }
      setTimeout(function () {
        if (ul_) {
          loading_.style.display = "none";
        }
      }, 300);
      body_.appendChild(ul_);
    }
  }
  window.onscroll = function () {
    var winH =
      document.documentElement.clientHeight || document.body.clientHeight;
    var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
    var scrollH =
      document.documentElement.scrollHeight || document.body.scrollHeight;
    if (winH + scrollT >= scrollH) {
      setTimeout(show, 500);
    }
  };
</script>

stephen Curry_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 原生使用Ajax实现数据图片懒加载

JS 原生使用Ajax实现数据图片懒加载
复制链接

扫一扫

JS 原生使用Ajax实现数据图片懒加载

“相关推荐”对你有帮助么？