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) center no-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-scrollTop scrollPic(10); } }) })
/*根据滚动程度加载图片，每次加载perAmount张*/
functionscrollPic(perAmount = 10){
vartotalAmount = perAmount * (scrollIndex+1);
//考虑到最后一次加载的时候，剩余的图片数量有可能达不到限定的每次加载的数量，这时候需要更改totalAmount的值 if(totalAmount>picData.imgSrc.length){ totalAmount = picData.imgSrc.length; } for(scrollIndex;scrollIndex varoimg =newImage(); oimg.src = picData.imgSrc[scrollIndex]; picList.append(oimg); } } | |
比较捉急的就是scrollTop、height那几个值的取值对象，总是记不清楚，所以按照js和jquery都写上了，以后可以直接用。将数值关系搞定之后，只要满足条件就触发加载即可。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本网站。
