js圖片懶載入和節流移動端
阿新 • • 發佈：2019-01-17
<!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>