预知用户将发生的行为,提前加载用户所需的图片
无预加载
- 没有提前加载,在需要的时候才去加载图片,这个时候会出现“假死”现象,屏幕迟迟没有图片显示
- eg
var index = 0, len = imgs.length; // imgs是一个元素为图片地址的数组 $('.btn').on('click',function(){ if('prev' === $(this).data('control')){ // 点击“上一张”按钮 index = Math.max(0,--index); }else{ // 点击“下一张”按钮 index = Math.min(len-1,++index); } $('#img').attr('src',imgs[index]); });
预加载
- 无序预加载
- 就是先将图片没有顺序的全部加载进来,然后再进行其他操作,可以加一个loding页,添加事件监听,当所有图片都onload或onerror之后将loading页隐藏,以进行其他操作
- eg
var count = 0; function loadByOrder(){ // imgs里面存放来图片的地址 $.each(imgs,function(i,src){ var img = new Image(); $(img).on('load error', function(){ // 计算进度条的百分比值 // 如果全部加载完,就隐藏进度条 count++; }); img.src = src; }); }
- 有序预加载
- 提前将图片按顺序加载出来
- eg
var count = 0; function loadByOrder(){ var img = new Image(); $(img).on('load error', function(){ if(count>=len){ // 所有图片已经加载完毕 }else{ // 加载下一张 loadByOrder(); } count++; }); // imgs里面存放来图片的地址 img.src = imgs[count]; }