//单张图片的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a{
200px;
height:200px;
margin:1000px auto;
background:#ccc;
}
.a img{
100%;
height:100%;
}
</style>
</head>
<body>
<div class="a">
<img xsrc="img/1.jpg" alt="" />
</div>
</body>
</html>
<script>
var img=document.getElementsByTagName("img")[0];
//单个图片加载；
function lazyload(ele){
var wheight=document.documentElement.scrollTop+document.documentElement.clientHeight;
var off=offset(ele).top+ele.offsetHeight;
if(wheight>off){
if(ele.load){
return;
}
var imge=new Image;
imge.src=ele.getAttribute("xsrc");
imge.onload=function(){
ele.src=imge.src;
}
ele.load=true;
}
}
window.onscroll=function(){
lazyload(img)
}
function offset(dom){
var left=null;
var top=null;
var parent=dom.offsetParent;
var les=dom.offsetLeft;
var led=dom.offsetTop;
while(parent){
les+=parent.offsetLeft;
led+=parent.offsetTop;
parent=parent.offsetParent;
}
return {left:les,top:led};
}
</script>
//多张图片的案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul,li{
list-style:none;
}
*{
margin:0;
padding:0;
}
#news>li{
100%;
height:80px;
padding:5px;
border-bottom:red 1px dashed;
}
#news>li>div:nth-of-type(1){
77px;
height:77px;
background:#ccc;
position:absolute;
}
img{
100%;
height:100%;
}
#news>li>div:nth-of-type(2){
margin-left:100px;
}
</style>
</head>
<body>
<ul id="news">
</ul>
</body>
</html>
<script>
var data=[
{"img":"img/1.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/2.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/3.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/4.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/5.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/6.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/7.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/8.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/9.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/10.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/11.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/12.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/13.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/14.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/15.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/16.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/17.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/18.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"},
{"img":"img/19.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"} ,
{"img":"img/20.jpg","h3":"新闻","cont":"重要新闻重要新闻重要新闻"}
]
var st="";
var news=document.getElementById("news")
function load(){
for(var i=0;i<data.length;i++){
st+="<li>";
st+="<div>";
st+="<img xsrc='"+data[i].img+"'/>";
st+="</div>";
st+="<div>"
st+="<h3>"+data[i].h3+"</h3>"
st+="<p>"+data[i].cont+"</p>"
st+="</div>";
st+="</li>";
}
news.innerHTML=st;
}
load();
// 多张图片加载
var img=document.getElementsByTagName("img");
function lazylod(){
for(var i=0;i<img.length;i++){
if(img[i].load==true){
continue;
}
lazyload(img[i]);
}
}
setTimeout(function(){
lazylod()
},1000)
window.onscroll=function(){
lazylod()
}
function lazyload(ele){
var swidth=document.documentElement.scrollTop+document.documentElement.clientHeight;
var tops=offset(ele).top+ele.offsetHeight;
if(swidth>tops){
if(ele.load==true){
return;
}
var im=new Image;
im.src=ele.getAttribute("xsrc");
im.onload=function(){
ele.src=im.src
}
ele.load=true;
}
}
function offset(ele){
var le=ele.offsetLeft;
var to=ele.offsetTop;
var parent=ele.offsetParent;
while(parent){
le+=parent.offsetLeft;
to+=parent.offsetTop;
parent=parent.offsetParent;
}
return {left:le,top:to};
}
</script>