js实现多张图片延迟加载效果
程序员文章站
2023-02-24 09:54:43
本文实例为大家分享了js实现多张图片延迟加载效果的具体代码,供大家参考,具体内容如下
具体代码如下:
本文实例为大家分享了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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。