阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      JavaScript 处理后台动态返回数据的图片延迟加载

      模拟后台返回的 JSON 数据,动态创建数据;

      默认第一篇图片要加载;

      剩下的图片,滚到的时候再加载;如果继续滚动,之前加载过的图片,不进行重复加载;

      显示出来的图片,逐渐显示出来,透明度不断增加;

      滚动 2 屏幕后,出现返回顶部的按钮,并且以匀速向顶部移动;

      HTML+CSS 样式如下

      <!DOCTYPE html>
      <html>
      <head>
          <meta charset="UTF-8">
          <title>处理后台动态返回数据的图片延迟加载</title>
          <style type="text/css">
              #home_top {height: 48px;line-height:48px;font-size:18; text-align: center; color:#008CD7;}
              #home_bottom {color:#008CD7;text-align:center;font-size:14px;}
              body, div, ul, li, img, p {
                  margin: 0;
                  padding: 0;
                  font-family: "微软雅黑";
                  font-size: 14px;
              }
              ul, li {
                  list-style: none;
              }
              img {
                  border: none;
              }
              html, body {
                  width: 100%;
              }
              #con {
                  margin: 10px 50px;
                  padding: 10px;
                  border: 1px dashed #ff0000;
              }
              #con li {
                  padding: 5px 0;
                  border-bottom: 1px dashed #ccc;
                  overflow: hidden;
              }
              #con li img {
                  display: block;
                  float: left;
                  width: 250px;
                  opacity: 0;
                  filter: alpha(opacity=0);
              }
              #con li p {
                  display: block;
                  float: right;
                  width: 70%;
                  line-height: 30px;
                  font-size: 16px;
              }
              #top {
                  display: none;
                  position: fixed;
                  right: 5px;
                  bottom: 10px;
                  padding: 2px;
                  width: 36px;
                  height: 36px;
                  text-align: center;
                  font-size: 13px;
                  border-radius: 5px;
                  background: #FFF38F;
                  cursor: pointer;
              }
          </style>
      </head>
      <body>
      <h3 id="home_top">处理后台动态返回数据的图片延迟加载 - Powered By <a href="http://taobao.fm/"target="_blank">broszhu</a>  博客网址:<a href="http://taobao.fm/" target="_blank">taobao.fm</a> </h2>
          <p id="home_bottom">学习JavaScript是一件很有趣的事,可以做出很多自豪的小玩意!--broszhu (这个页面是实现原理:<a href="#" target="_blank">点此查看</a>)</p>
      <div id="con">
          <ul>
          </ul>
      </div>
      <div id="top">回到顶部</div>
      </body>
      </html>
      

      JavaScript 代码如下:

      <script src="js/json.js"></script>
      <script src="js/tools.min.js"></script>
      <script >
          var tool = new Tool;//创建一个DOM库的实例;
          var oDiv = document.getElementById("con");
          var oUl = oDiv.getElementsByTagName("ul")[0];
          var oTop = document.getElementById("top");
          //动态引入json数据;
          var frg = document.createDocumentFragment();
          for (var i = 0; i < data.length; i++) {
              var cur = data[i];
              var oLi = document.createElement("li");
              oLi.innerHTML = "<img src='img/ddd.jpg' trueImg='" + cur.img + "' alt=''/><p>" + cur.txt + "</p>";
              frg.appendChild(oLi);
          }
          oUl.appendChild(frg);
          //功能说明
          window.setTimeout(loadImg, 100);//默认加载第一屏显示的图片
          window.onscroll = loadImg;//当滚动的时候,还要加载之前没有显示的图片,问题:之前加载过的图片存在多次重新的加载的问题
          oTop.onclick = toTop;//返回顶部功能;
          //需要加载的图片;
          function loadImg() {
              var winTop = getWin("clientHeight") + getWin("scrollTop");
              var images = oUl.getElementsByTagName("img");
              for (var i = 0; i < images.length; i++) {
                  var cur = images[i];
                  var curTop = tool.offset(cur).top;
                  var trueImg = cur.getAttribute("trueImg");
                  if (curTop <= winTop && !cur.isLoad) {
                      showTrueImg(cur, trueImg);
                  }
              }
              //返回顶部出现的时间;
              var cH = getWin("clientHeight");
              if (!oTop.isMove) {
                  oTop.style.display = (winTop >= (cH * 2)) ? "block" : "none";
              }
          }
          //替换加载图片
          function showTrueImg(cur, trueImg) {
              var oImg = new Image;
              oImg.src = trueImg;
              oImg.onload = function () {
                  cur.src = trueImg;
                  cur.isLoad = true;
                  move(cur);
              }
          }
          //
          function getWin(attr) {
              return document.documentElement[attr] || document.body[attr];
          }
          //jQuery-->fadeIn//透明度逐渐显示;
          function move(curEle) {
              var count = 0;
              _move();
              function _move() {
                  window.clearTimeout(curEle.timer);
                  count += 0.02;
                  if (count >= 1) {
                      tool.setCss(curEle, "opacity", 1);
                      return;
                  }
                  tool.setCss(curEle, "opacity", count);
                  curEle.timer = window.setTimeout(_move, 10);
              }
          }
          //返回顶部;
          function toTop() {
              this.style.display = "none";
              this.isMove = true;
              var count = document.body.scrollTop;
              var cur = this;
              _toTop();
              function _toTop() {
                  window.clearTimeout(cur.timer);
                  if (count - 200 <= 0) {
                      document.body.scrollTop = 0;
                      cur.isMove = false;
                      return;
                  }
                  count -= 200;
                  document.body.scrollTop = count;
                  cur.timer = window.setTimeout(_toTop, 10);
              }
          }
      </script>
      
      目录
      本文目录
      目录