本文介绍了一种在移动端实现图片懒加载和节流的技术方案。通过监听滚动事件并设置节流，当图片进入可视区域时，动态设置图片的`src`属性，实现延迟加载，同时使用CSS3的过渡效果增强用户体验。代码中还包含了一个简单的页面布局示例。
<!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>
扫一扫
1097
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
