网站优化

漯河微信小程序开发_js完成多张图片延迟加载效

作者:admin 发布时间:2021-01-11
js实现多张图片延迟加载效果       这篇文章主要为大家详细介绍了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:elli凡科抠图is;
 white-space: nowrap;
 .news li div:nth-child(2) p{
 line-height:20px;
 font-size:12px;
 color:#ccc;
 /style 
 /head 
 body 
 ul id='news' 
 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 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 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 

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



收缩