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


Posted in Javascript onJuly 17, 2017

本文实例为大家分享了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>

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

Javascript 相关文章推荐
js改变img标签的src属性在IE下没反应的解决方法
Jul 23 Javascript
Javascript Web Slider 焦点图示例源码
Oct 10 Javascript
javascript中全局对象的isNaN()方法使用介绍
Dec 19 Javascript
利用js正则表达式验证手机号,email地址,邮政编码
Jan 23 Javascript
零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门
Dec 20 Javascript
jQuery包裹节点用法完整示例
Sep 13 Javascript
解决拦截器对ajax请求的拦截实例详解
Dec 21 Javascript
JavaScript实现单击网页任意位置打开新窗口与关闭窗口的方法
Sep 21 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
element跨分页操作选择详解
Jun 29 Javascript
ant design charts 获取后端接口数据展示
May 25 Javascript
js指定步长实现单方向匀速运动
Jul 17 #Javascript
webpack构建vue项目的详细教程(配置篇)
Jul 17 #Javascript
javascript 跨域问题以及解决办法
Jul 17 #Javascript
vue2.x 父组件监听子组件事件并传回信息的方法
Jul 17 #Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
Jul 17 #Javascript
详解Vue学习笔记进阶篇之列表过渡及其他
Jul 17 #Javascript
js学使用setTimeout实现轮循动画
Jul 17 #Javascript
You might like
解决Codeigniter不能上传rar和zip压缩包问题
2014/03/07 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
JS自调用匿名函数具体实现
2014/02/11 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
js实现图片点击左右轮播
2015/07/08 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
微信小程序实现团购或秒杀批量倒计时
2020/11/01 Javascript
js时间戳转yyyy-MM-dd HH-mm-ss工具类详解
2019/04/30 Javascript
three.js利用gpu选取物体并计算交点位置的方法示例
2019/11/25 Javascript
Vue使用JSEncrypt实现rsa加密及挂载方法
2020/02/07 Javascript
js实现圆形显示鼠标单击位置
2020/02/11 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
JS实现炫酷轮播图
2020/11/15 Javascript
Python虚拟环境Virtualenv使用教程
2015/05/18 Python
Python中的getopt函数使用详解
2015/07/28 Python
python实现矩阵打印
2019/03/02 Python
Python的互斥锁与信号量详解
2019/09/12 Python
python实现自动化报表功能(Oracle/plsql/Excel/多线程)
2019/12/02 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
python之生成多层json结构的实现
2020/02/27 Python
澳大利亚家具和家居用品在线:BROSA
2017/11/02 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
澳大利亚波希米亚风时尚品牌:Tree of Life
2019/09/15 全球购物
Perfume’s Club美国官网:西班牙第一家在线美容店
2020/06/10 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
商场拾金不昧表扬信
2014/01/13 职场文书
道歉情书大全
2015/05/12 职场文书
离婚上诉状范文
2015/05/23 职场文书
2015年度工程师评职称工作总结
2015/10/14 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Nginx 负载均衡是什么以及该如何配置
2021/03/31 Servers
5分钟教你docker安装启动redis全教程(全新方式)
2021/05/29 Redis
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis