js图片懒加载和节流移动端

本文介绍了一种在移动端实现图片懒加载和节流的技术方案。通过监听滚动事件并设置节流,当图片进入可视区域时,动态设置图片的`src`属性,实现延迟加载,同时使用CSS3的过渡效果增强用户体验。代码中还包含了一个简单的页面布局示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >



<!DOCTYPE html>
<html>
<head>
<title>图片懒加载和节流移动端</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script>
      !function(){
      let fun = function(){
      let width = document.documentElement.clientWidth;
      document.getElementsByTagName("html")[0].style.fontSize = width/7.5 + "px";
      }
          document.addEventListener("DOMContentLoaded", fun, false);
      }();
    </script>
<style type="text/css">
html{
font-size: 100px;
}
body{
width: 7.5rem;
overflow-x: hidden;
}
*{
margin: 0;
padding:0;
}
.one{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}


.container{
width: 100%;
box-sizing: border-box;
overflow: hidden;
text-align: center;
font-size: 36px;
}
img{
border: none;
outline: none;
margin: 0;
padding: 0;
opacity: 0;
}
.container .item{
text-align: center;
display: inline-block;
font-size: 0.32rem;
margin-bottom: 0.1rem;
}
.container .item .tit-f{
text-align: left;
/*overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;*/
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
width: auto;
min-width: 3.0rem;
max-width: 3.3rem;
margin: 0 auto;


}
.container .item .from{
text-align: left;
font-size: 0.20rem;
margin: 0.1rem 0 0.1rem 0.07rem;
display: inline-block;
max-width: 1.85rem;
vertical-align: middle;


}
.container .item .time{
text-align: right;
font-size: 0.20rem;
margin: 0.1rem 0 0.1rem 0.07rem;
display: inline-block;
width: 1.4rem;
vertical-align: middle;
}
.container .item .f-t-box{
width: 100%;
box-sizing: border-box;
text-align: left;
}
.container img{
height: 3.75rem;
width: auto;
min-width: 3.5rem;
max-width: 3.75rem;
display: inline-block;
border: none;
outline: none;
}


.imgFadeIn{
transition: all 3s;
}




</style>
</head>
<body>



<div class="container">


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


  <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>


   <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>




 <div class="item">
  <img src="" data-src="images/a7.jpg">
  <div class="tit-f">
     这是我的标题文字这是我的标题文字这是我的标题文字 这是我的标题文字这是我的标题文字这是我的标题文字
  </div>
  <div class="f-t-box">
<div class="from one">南方都市报南南方都市报南南方都市报南南方都市报南</div>
<div class="time one">2017-10-24</div>
  </div>
 </div>






 
</div>


<script>




window.onload = function(){


var flag = true;//在一定时间之后才调用滚动函数
let imgSrc = getRealImgSrc();//获取图片真正的src


//获得图片的真实地址
function getRealImgSrc(){
let imgSrcTemp = [];
let img = document.getElementsByTagName("img");//图片
for(let i =0, len = img.length; i<len; i++){
imgSrcTemp.push(img[i].getAttribute("data-src"));
}
return imgSrcTemp;
}


imgLazyLoad();


//初始化
function init(){
let clientHeight = document.documentElement.clientHeight;
let img = document.getElementsByTagName("img");//图片
for(let i=0,len = img.length;i<len;i++){
if(img[i].offsetTop <= clientHeight ){
img[i].setAttribute("src",imgSrc[i]);
img[i].style.opacity = 1;
}
}
}


//图片懒加载
function imgLazyLoad(){

let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
let clientHeight = document.documentElement.clientHeight;
let img = document.getElementsByTagName("img");//图片
for(let i=0,len = img.length;i<len;i++){
if(img[i].offsetTop <= scrollTop + clientHeight-50){
if(!img[i].getAttribute("src")){
img[i].setAttribute("src",imgSrc[i]);
img[i].onload = function(){
this.className = "imgFadeIn";
setTimeout(function(){
this.style.opacity = 1;
}.bind(this),200)
}
}
}
}
}


//init();//初始化首屏的加载


//滚动加载
window.onscroll = function(){
if(flag){
flag = false;
imgLazyLoad();
}
}


//滚动函数节流使用
setInterval(function(){
flag = true;
},100);





}


</script>


</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值