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 相关文章推荐
JQuery 前台切换网站的样式实现
Jun 22 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
Javascript中匿名函数的多种调用方式总结
Dec 06 Javascript
js整数字符串转换为金额类型数据(示例代码)
Dec 26 Javascript
js获取当前时间显示在页面上并每秒刷新
Dec 24 Javascript
Java中Timer的用法详解
Oct 21 Javascript
深入浅析JavaScript中prototype和proto的关系
Nov 15 Javascript
jquery淡入淡出效果简单实例
Jan 14 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
将angular.js项目整合到.net mvc中的方法详解
Jun 29 Javascript
vue模块拖拽实现示例代码
Mar 09 Javascript
Vue+iview+webpack ie浏览器兼容简单处理
Sep 20 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
使用无限生命期Session的方法
2006/10/09 PHP
PHP实现下载功能的代码
2012/09/29 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP命名空间与自动加载机制的基础介绍
2019/08/25 PHP
Javascript和Ajax中文乱码吐血版解决方案
2009/12/21 Javascript
JavaScript学习笔记(十七)js 优化
2010/02/04 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
JavaScript实现Fly Bird小游戏
2016/12/15 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
详解HTML5 使用video标签实现选择摄像头功能
2017/10/25 Javascript
基于vue.js 2.x的虚拟滚动条的示例代码
2018/01/23 Javascript
axios向后台传递数组作为参数的方法
2018/08/11 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
layui内置模块layim发送图片添加加载动画的方法
2019/09/23 Javascript
解决vue2中使用elementUi打包报错的问题
2020/09/22 Javascript
Python类的定义、继承及类对象使用方法简明教程
2015/05/08 Python
Python深入06——python的内存管理详解
2016/12/07 Python
Python获取指定字符前面的所有字符方法
2018/05/02 Python
Django中间件实现拦截器的方法
2018/06/01 Python
Python第三方库face_recognition在windows上的安装过程
2019/05/03 Python
Python利用matplotlib做图中图及次坐标轴的实例
2019/07/08 Python
使用keras实现densenet和Xception的模型融合
2020/05/23 Python
Python urllib2运行过程原理解析
2020/06/04 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
幼儿园教师辞职信
2014/01/18 职场文书
会议活动邀请函
2014/01/27 职场文书
委托书范文
2014/04/02 职场文书
实习生评语
2014/04/26 职场文书
公司证明怎么写
2014/09/22 职场文书
领导班子三严三实心得体会
2014/10/13 职场文书
2014年办公室个人工作总结
2014/11/12 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS