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 相关文章推荐
php上传图片并给图片打上透明水印的代码
Jun 07 Javascript
html a标签-超链接中confirm方法使用介绍
Jan 04 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
JavaScript中判断原生函数检查function是否是原生代码
Sep 09 Javascript
JavaScript中getUTCMinutes()方法的使用详解
Jun 10 Javascript
jquery实现图片上传前本地预览功能
May 10 Javascript
学习掌握JavaScript中this的使用技巧
Aug 29 Javascript
JS获取html元素的标记名实现方法
Oct 08 Javascript
jquery加载单文件vue组件的方法
Jun 20 jQuery
Vue.js框架路由使用方法实例详解
Aug 25 Javascript
Vue.js 2.5新特性介绍(推荐)
Oct 24 Javascript
vue自动化路由的实现代码
Sep 30 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
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
PHP简单实现二维数组赋值与遍历功能示例
2017/10/19 PHP
js获取变量
2006/08/24 Javascript
javascript 年月日联动实现核心代码
2009/12/21 Javascript
如何用JavaScript动态呼叫函数(两种方式)
2013/05/03 Javascript
javascript利用apply和arguments复用方法
2013/11/25 Javascript
javascript中String对象的slice()方法分析
2014/12/20 Javascript
js实现动画特效的文字链接鼠标悬停提示的方法
2015/03/02 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
详解Jquery实现ready和bind事件
2016/04/14 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
原生js实现trigger方法示例代码
2019/05/22 Javascript
Python写的Discuz7.2版faq.php注入漏洞工具
2014/08/06 Python
解析Python中的异常处理
2015/04/28 Python
Python pymongo模块用法示例
2018/03/31 Python
Python基于OpenCV库Adaboost实现人脸识别功能详解
2018/08/25 Python
python 并发下载器实现方法示例
2019/11/22 Python
linux 下python多线程递归复制文件夹及文件夹中的文件
2020/01/02 Python
python使用selenium爬虫知乎的方法示例
2020/10/28 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
HTML5拖拽文件上传的示例代码
2021/03/04 HTML / CSS
Opodo意大利:欧洲市场上领先的在线旅行社
2019/10/24 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
PHP两种查询函数array/row的区别
2013/06/03 面试题
销售顾问的岗位职责
2013/11/13 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
环保建议书作文
2014/03/12 职场文书
临床医学专业求职信
2014/08/08 职场文书
迎七一演讲稿
2014/09/12 职场文书
初中生庆国庆演讲稿范文2014
2014/09/25 职场文书
缓刑人员思想汇报
2014/10/11 职场文书
安全生产培训心得体会
2016/01/18 职场文书