js图片加载效果实例代码(延迟加载+瀑布流加载)
主要做了两种图片加载的效果
一种是遇到页面图片比较多的时候,带读条效果的加载提示(为了验证正确加载,设置了1秒钟的加载间隔时间)
另外一种是根据滑块的位置进行图片的预加载,在用户不察觉的情况下,实现瀑布流的加载效果
一延迟加载
主要思路:
- HTML的img标签中,将正确的地址存在data-src属性中,给所有图片设置一个转圈圈的loading图片作为background
- js中,依次读取每一个img,将data-src中的地址替换到src中,去掉background
- 每成功加载一张图片,进度条的百分比进行相应的变化。
- 如果加载不成功,就提示图片加载错误。
HTML结构很简单,就是一个div.picList包裹了所有img,然后加上一个简单的进度条div#loadBar
css(使用的scss,编译时会自动加上各种兼容前缀)
.picList{
img{
width:100px;
height:100px;
position:relative;
/*加载失败时显示灰底文字*/
&:after{
content:"(⊙o⊙)加载失败";
font-size:6px;
font-family:FontAwesome;
color:rgb(100,100,100);
display:flex;
justify-content:center;
align-items:center;
position:absolute;
top:0;
left:0;
width:100px;
height:100px;
background-color:#ddd;
}
}
}
.lazy{
background:url(../pic/loading.gif)centerno-repeat;
border:1pxsolidblack;
}
#loadBar{
width:200px;
height:15px;
background:linear-gradient(90deg,#187103,#81b50b,#187103);
border:10pxsolidwhite;
position:absolute;
top:150px;
left:50%;
margin-left:-100px;
#loadBarMask{
width:70%;//这个数值显示没有加载成功的图片
height:100%;
background-color:beige;
position:absolute;
right:0;
}
}
css里面需要注意的地方有两个:
- 一个是把图片加载错误时显示的灰底文字放在了img的after伪类中,当图片加载失败,又去掉了background的gif图片之后,就会显示这个部分的内容及样式。
- 一个是进度条的样式。写得很简单,主要是一层带渐变的绿色和一层白色叠在一起。绿色表示已加载,白色表示未加载。显示的时候,直接控制白色那层的宽度即可。
js部分(直接执行loadPicPerSecond()即可)
varlazyPic=$('img.lazy');
varloadBarMask=$('#loadBarMask');
varpicList=$('.picList');
varactivePic=0;
vartotalPic=lazyPic.length;
/*每秒加载一张图片*/
functionloadPicPerSecond(){
lazyPic.each(function(index){
varself=$(this);
//console.log(self[0].complete);
/*img标签已经事先写在html中,所以此时的complete状态全部都是true*/
setTimeout(function(){
src[index]=self.attr('data-src');
self.attr('src',src[index]);
self.removeClass('lazy');
//图片获得正确src地址之后,可以执行下面的onload操作
self[0].onload=function(){
//加载读条loadBar动画
countPic();
}
//图片获得的src地址不正确时,执行下面的onerror操作
self[0].onerror=function(){
/*this.style.background='url(pic/compressed/picList18.jpg)centerno-repeat';*/
countPic();
}
},1000*index);
})
}
/*根据onload的执行情况来计算当前的图片加载进度.每onload一次,activePic就增加1*/
functioncountPic(){
activePic++;
varleftPic=totalPic-activePic;
varpercentPic=Math.ceil(leftPic/totalPic*100);//没有加载的图片百分比,和loadBarMask的宽度占比配合
console.log("已加载"+(100-percentPic)+"%");
loadBarMask.css("width",percentPic+"%");
if(percentPic==0){
$('#loadBar').hide();
}
}
二瀑布流加载
主要思路:
- 监听窗口滚动情况,当已经加载的图片的最后一张快要进入窗口的时候,开始加载下面的图片。
- 假设所有的图片地址已经存在一个json数据中,每次读取10张图片地址,加载它们之后,插入到现有的瀑布流末尾。
- 如此往复,直到加载完所有图片。
HTML和前面部分相同,只是把src写成正常地址即可。css完全一样。
js部分
varlazyPic=$('img.lazy');
varloadBarMask=$('#loadBarMask');
varpicList=$('.picList');
varscrollTop,
clientHeight,
scrollHeight;
varthreshold=200;//最后一张图片距离窗口200px的时候开始加载图片
varsrc=[];
varactivePic=0;
vartotalPic=lazyPic.length;
//待加载的图片数据
vardirtSrc="pic/compressed/picList";
varpicData={imgSrc:[
dirtSrc+"20.jpg",
dirtSrc+"21.jpg",
dirtSrc+"22.jpg",
dirtSrc+"23.jpg",
dirtSrc+"24.jpg",
dirtSrc+"25.jpg",
dirtSrc+"26.jpg",
dirtSrc+"27.jpg",
dirtSrc+"28.jpg",
dirtSrc+"29.jpg",
dirtSrc+"30.jpg",
dirtSrc+"31.jpg",
dirtSrc+"32.jpg",
dirtSrc+"33.jpg",
dirtSrc+"34.jpg",
dirtSrc+"35.jpg",
dirtSrc+"36.jpg",
dirtSrc+"37.jpg",
dirtSrc+"38.jpg",
dirtSrc+"39.jpg",
dirtSrc+"40.jpg",
dirtSrc+"41.jpg",
dirtSrc+"42.jpg",
dirtSrc+"43.jpg",
dirtSrc+"44.jpg",
dirtSrc+"45.jpg",
dirtSrc+"46.jpg",
dirtSrc+"47.jpg",
dirtSrc+"48.jpg",
dirtSrc+"49.jpg",
]};
//加载次数计数器
varscrollIndex=0;
$(function(){
/*监听窗口滚动情况*/
$(window).on('scroll',function(){
scrollTop=$(window).scrollTop();//$(window).scrollTop()==document.body.scrollTop
clientHeight=$(window).height();
scrollHeight=picList.last().height();//picList.last()[0].clientHeight
/*目标与窗口的距离达到阈值时开始加载*/
if(scrollHeight-clientHeight-scrollToppicData.imgSrc.length){
totalAmount=picData.imgSrc.length;
}
for(scrollIndex;scrollIndex
比较捉急的就是scrollTop、height那几个值的取值对象,总是记不清楚,所以按照js和jquery都写上了,以后可以直接用。将数值关系搞定之后,只要满足条件就触发加载即可。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。