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

时间：2021-05-26

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

具体代码如下:

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <!--做移动端响应式必须加的样式--> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> <title>Document</title> <style> *{ 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; } </style></head><body> <ul id='news' class='news'> <li> <div> <img src="" alt=""> </div> <div> <h2>我是一个标题</h2> <p>我是内容</p> </div> </li> </ul> <script> 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<len;i++){ var curData = jsonData[i] str+='<li>'; str+='<div><img src="" trueImg="'+curData['img']+'"></div>'; str+='<div>'; str+='<h2>'+curData['title']+'</h2>'; str+='<p>'+curData['desc']+'</p>'; str+='</div>'; str+='</li>'; } } 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<len;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<B){ lazyImg(curImg); } } } //4、开始的时候一秒加载第一屏的图片，当滚动条滚动的时候，再加载剩余的图片 window.setTimeout(handleAllImage,1000); window.onscroll = handleAllImage; </script></body></html>

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章