一般像一些网站在显示图片时,需要预加载技术,避免图片加载时显示死图的现象。有了预加载技术,可以结合进度条显示,把图片集提前加载出来,这样在图片播放过程中就比较流畅,体验就比较好。
1、首先可以尝试写一个没有预加载技术的图片切换效果,我整理的是js代码,前端显示的代码就不提供了。
$(".btn").on("click",function(){ var control=$(this).data("control"); if(control==="prev"){ index=Math.max(0,--index); }else{ index=Math.min(len-1,++index); } $(".title").html((index+1)+"/"+len); $(".img").attr("src",img[index]); })
2、接下来,使用预加载技术,在点击轮播效果之前,先把图片加载出来。可以结合进度条来传达加载的效果。
var index=0, len=img.length, count=0, $progress=$(".jindu"); $.each(img,function(i,src){ var imgobj=new Image(); $(imgobj).on("load",function(){ $progress.html(Math.round((count+1)/len*100)+"%"); if(count>=len-1){ $(".loading").hide(); $(".title").html("1/"+len); } count++; }) imgobj.src=src; })
3、注意,图片集合是通过路径保存的一个数组。
var img=[ 'http://test.huiliewang.com/images/banner1.jpg', 'http://test.huiliewang.com/images/banner2.jpg', 'http://test.huiliewang.com/images/banner3.jpg', 'http://www.nfxhlt.com/picture/b1.jpg', 'http://www.nfxhlt.com/picture/b2.jpg', 'http://www.nfxhlt.com/picture/b3.jpg' ];
通过以上的预加载技术,实现图片提前加载,确保点击下一页、上一页、自动轮播的流畅显示效果。