html5图片延迟加载效果,js实现多张图片延迟加载效果

本文实例为大家分享了js实现多张图片延迟加载效果的具体代码，供大家参考，具体内容如下

具体代码如下:

Document

*{

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;

}

• 我是一个标题

  我是内容

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

var curData = jsonData[i]

str+='

';

str+='

';

str+='

';

str+='

'+curData['title']+'

';

str+='

'+curData['desc']+'

';

str+='

';

str+='';

}

}

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

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

lazyImg(curImg);

}

}

}

//4、开始的时候一秒加载第一屏的图片，当滚动条滚动的时候，再加载剩余的图片

window.setTimeout(handleAllImage,1000);

window.onscroll = handleAllImage;

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。