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 相关文章推荐
javascript 多级checkbox选择效果
Aug 20 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
Jun 26 Javascript
jquery实现点击查看更多内容控制段落文字展开折叠效果
Aug 06 Javascript
给easyui datebox扩展一个清空的实例
Nov 09 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
js 递归和定时器的实例解析
Feb 03 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
Vue中使用Sortable的示例代码
Apr 07 Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 Javascript
vue中的适配px2rem示例代码
Nov 19 Javascript
Vue中通过vue-router实现命名视图的问题
Apr 23 Javascript
微信小程序实现加入购物车滑动轨迹
Nov 18 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
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
PHP面向对象概念
2011/11/06 PHP
PHP return语句的另一个作用
2014/07/30 PHP
PHP+Mysql实现多关键字与多字段生成SQL语句的函数
2014/11/05 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
sogou地图API用法实例教程
2014/09/11 Javascript
AngularJS基础知识
2014/12/21 Javascript
jQuery实现鼠标滑过点击事件音效试听
2015/08/31 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
2016/03/30 Javascript
详解js的事件代理(委托)
2016/12/22 Javascript
微信浏览器禁止页面下拉查看网址实例详解
2017/06/28 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
2018/08/09 Javascript
node版本管理工具n包使用教程详解
2018/11/09 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
JavaScript实现移动小精灵的案例代码
2020/12/12 Javascript
Javascript中的奇葩知识,你知道吗?
2021/01/25 Javascript
[01:19:33]DOTA2-DPC中国联赛 正赛 iG vs VG BO3 第一场 2月2日
2021/03/11 DOTA
Linux下多个Python版本安装教程
2018/08/15 Python
对python多线程与global变量详解
2018/11/09 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
英国领先品牌手动工具和电动工具供应商:Tooled Up
2018/11/24 全球购物
初中校园之声广播稿
2014/01/15 职场文书
学生实习介绍信
2014/01/15 职场文书
国旗下的演讲稿
2014/05/08 职场文书
专科生就业求职信
2014/06/22 职场文书
夏季药店促销方案
2014/08/22 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
文明礼貌主题班会
2015/08/14 职场文书
2019暑期安全倡议书!
2019/06/27 职场文书
TypeScript 使用 Tuple Union 声明函数重载
2022/04/07 Javascript
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs