图片预加载

 

预知用户将发生的行为，提前加载用户所需的图片

 

无预加载

• 没有提前加载，在需要的时候才去加载图片，这个时候会出现“假死”现象，屏幕迟迟没有图片显示
• 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];
    }