js实现图片加载淡入淡出效果
本文实例为大家分享了js图片加载淡入淡出效果展示的具体代码,供大家参考,具体内容如下
HTML代码
首先是图片标记的写法:
需要将图片的地址放到data-src属性里,而src值填写默认的一张图片。
CSS代码
所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节:
img{ opacity:1; transition:opacity0.3s; } img[data-src]{ opacity:0; }
这样写的作用是什么?等当图片加载时,你就能看的效果了。
JavaScript代码
我们最终会将data-src属性去掉,换成src属性,但这是图片加载成功后的动作:
[].forEach.call(document.querySelectorAll('img[data-src]'),function(img){ img.setAttribute('src',img.getAttribute('data-src')); img.onload=function(){ img.removeAttribute('data-src'); }; });
相比起其它各种的图片延迟加载技术,这种方法非常的简单,它几乎不要求其它任何条件,可以用在任何地方,使用起来非常灵活。
当然,简单有简单的好坏,也会因为简单而不足。它不具有图片图片滚动到可视窗口内再加载的功能。最终使用哪种技术,还是要看场景而定。
下面是lazyload.js
varlazyLoad={ init:function(){ varthat=this; that.onerrorImgUrl="data-error";//图片加载失败用什么图片替换 that.srcStore="data-src";//图片真实地址存放的自定义属性 that.class="lazy-img";//惰性加载的图片需要添加的class that.sensitivity=50;//该值越小,惰性越强(加载越少) minScroll=5, slowScrollTime=200; document.addEventListener("scroll",function(){ that.changeimg(); }); setTimeout(function(){ that.trigger(); },100); }, scanImage:function(){ varthat=this; varimgList=[]; varallimg=[].slice.call(document.querySelectorAll('img.'+that.class+'')); allimg.forEach(function(ele){ if(!that.isLoadedImageCompleted(ele)){ imgList.push(ele); } }); that.imglistArr=imgList; }, isLoadedImageCompleted:function(ele){ return(ele.getAttribute('data-loaded')=='1') }, trigger:function(){ varthat=this; eventType=that.isPhone&&"touchend"||"scroll"; that.fireEvent(document,eventType); //$(window).trigger(eventType); }, fireEvent:function(element,event){ //其他标准浏览器使用dispatchEvent方法 varevt=document.createEvent('HTMLEvents'); //initEvent接受3个参数: //事件类型,是否冒泡,是否阻止浏览器的默认行为 evt.initEvent(event,true,true); return!element.dispatchEvent(evt); }, changeimg:function(){ functionloadYesOrno(img){ varwindowPageYOffset=window.pageYOffset, windowPageYOffsetAddHeight=windowPageYOffset+window.innerHeight, imgOffsetTop=img.getBoundingClientRect().top+window.pageYOffset; returnimgOffsetTop>=windowPageYOffset&&imgOffsetTop-that.sensitivity<=windowPageYOffsetAddHeight; } functionloadImg(img,index){ varimgUrl=img.getAttribute(that.srcStore); img.setAttribute("src",imgUrl); img.onload||(img.onload=function(){ img.classList.remove(that.class); img.setAttribute('data-loaded',1) img.removeAttribute('data-src'); //$(this).removeClass(that.class).getAttribute('data-loaded',1), that.imglistArr[index]=null; img.onerror=img.onload=null; }, img.onerror=function(){ img.src=img.getAttribute(that.onerrorImgUrl); img.classList.remove(that.class); img.classList.add("lazy-err"); img.setAttribute('data-loaded',0); //$(this).removeClass(that.class).getAttribute('data-loaded',0), that.imglistArr[index]=null, img.onerror=img.onload=null }); varnewImgStack=[]; that.imglistArr.forEach(function(ele){ //img标签可见并且加载未完成 if(!that.isLoadedImageCompleted(ele)){ newImgStack.push(ele); } }); that.imglistArr=newImgStack; } varthat=this; that.scanImage(); that.imglistArr.forEach(function(val,index){ if(!val)return; varimg=val; if(!loadYesOrno(img)||that.isLoadedImageCompleted(img))return; if(!img.getAttribute(that.srcStore))return; loadImg(img,index); }) } };
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。