js实现图片加载淡入淡出效果

2024-02-26 01:52:03 58

本文实例为大家分享了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);
})

}
};

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

js实现图片加载淡入淡出效果

热门推荐

随机推荐