欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

js实现多张图片延迟加载效果

程序员文章站 2022-06-03 14:13:56
本文实例为大家分享了js实现多张图片延迟加载效果的具体代码,供大家参考,具体内容如下 具体代码如下:

本文实例为大家分享了js实现多张图片延迟加载效果的具体代码,供大家参考,具体内容如下

具体代码如下:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <!--做移动端响应式必须加的样式-->
  <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
  <title>document</title>
  <style>
    *{
      margin:0;
      padding:0;
      font-size:14px;
    }
    ul,li{
      list-style:none;
    }
    img{
      display:block;
      border:none;
    }
    /*
      最外层容器不设定宽高的
    */
    .news{
      padding:10px;
    }
    .news li{
      height:60px;
      padding:10px 0;
      border-bottom:1px solid #dedede;
      position:relative;
    }
    .news li > div:nth-child(1){
      position:absolute;
      top:10px;
      left:0;
      width:75px;
      height:60px;
      background:url('img/default.png') no-repeat center center;
      background-size:100% 100%;/*设置背景图片大小*/
    }
    .news li > div:nth-child(1) img{
      width:100%;
      height:100%;
      display:none;
      opacity:0;
    }
    .news li > div:nth-child(2){
      height:60px;
      margin-left:80px;
    }
    .news li > div:nth-child(2) h2{
      height:20px;
      line-height:20px;
      /*实现文字超出隐藏*/
      overflow:hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
    }
    .news li > div:nth-child(2) p{
      line-height:20px;
      font-size:12px;
      color:#ccc;
    }
  </style>
</head>
<body>
  <ul id='news' class='news'>
    <li>
      <div>
        <img src="" alt="">
      </div>
      <div>
        <h2>我是一个标题</h2>
        <p>我是内容</p>
      </div>
    </li>
  </ul>

  <script>
    var news = document.getelementbyid('news')
    var imglist = news.getelementsbytagname('img')
    //1、获取需要绑定的数据(ajax)
    var jsondata = null;
    ~function(){
      var xhr = new xmlhttprequest();
      //url地址后面加的随机数是在清除每一次请求数据时候(get请求)产生的缓存
      xhr.open('get','data.json?_='+math.random(),false)
      xhr.onreadystatechange = function(){
        if(xhr.readystate ===4 && /^2\d{2}$/.test(xhr.status)){
          var val = xhr.responsetext;
          jsondata = utils.formatjson(val)
        }
      }
      xhr.send(null)
    }()
    //2、数据绑定->把jsondata存储的数据绑定到页面中(字符串拼接)
    ~function(){
      var str = '';
      if(jsondata){
        for(var i = 0,len = jsondata.length;i<len;i++){
          var curdata = jsondata[i]
          str+='<li>';
          str+='<div><img src="" trueimg="'+curdata['img']+'"></div>';
          str+='<div>';
          str+='<h2>'+curdata['title']+'</h2>';
          str+='<p>'+curdata['desc']+'</p>';
          str+='</div>';
          str+='</li>';
        }
      }
      news.innerhtml = str;
    }()
    //3、图片延迟加载
    //我先编写一个方法实现单张图片的延迟加载
    function lazyimg(curimg){
      var oimg = new image;
      oimg.src = curimg.getattribute('trueimg');
      oimg.onload = function(){
        curimg.src = this.src;
        curimg.style.display = "block";
        fadein(curimg)
        oimg = null
      };
      curimg.isload = true;
    }

    function fadein(curimg){
      var duration = 500,interval = 10,target = 1;
      var step = (target/duration)*interval;
      var timer = window.setinterval(function(){
        var curop = utils.getcss(curimg,'opacity');
        if(curop>1){
          curimg.style.opacity = 1;
          window.clearinterval(timer)
          return
        }
        curop+=step;
        curimg.style.opacity = curop;
      },interval)

    }

    function handleallimage(){
      for(var i = 0,len = imglist.length;i<len;i++){
        var curimg = imglist[i];
        //当前的图片处理过了就不需要在重新的进行处理了
        if(curimg.isload = true){
          continue;
        }
        //只有a小于b的时候才进行处理,当前图片是隐藏的,我们其实计算的是它父节点的a
        var curimgpar = curimg.parentnode;
        var a = utils.offset(curimgpar).top + curimgpar.offsetheight;
        var b = utils.win('clientheight')+utils.win('scrolltop');
        if(a<b){
          lazyimg(curimg);
        }
      }
    }

    //4、开始的时候一秒加载第一屏的图片,当滚动条滚动的时候,再加载剩余的图片
    window.settimeout(handleallimage,1000);
    window.onscroll = handleallimage;
  </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。