ImgProgressiveLoading

by Qi Wan

HTML

<p>Via css3:</p>
<img id="s1" class="blur" src="http://www.hzchuangxiangzhe.cn/assets/resource/image/test_small.jpg">
<img id="b1" class="blur hide" src="http://www.hzchuangxiangzhe.cn/assets/resource/image/test.jpg">
<p>Via canvas:</p>
<div id="canvas_holder">
  <img id="s2" class="blur hide" src="http://www.hzchuangxiangzhe.cn/assets/resource/image/test_small.jpg">
  <img id="b2" class="blur hide" src="http://www.hzchuangxiangzhe.cn/assets/resource/image/test.jpg">
  <canvas width="500" height="333"></canvas>
</div>

CSS

img {
  width: 500px;
  height: 333px;
}

#b1 {
  transition: all 1.5s;
  filter: blur(0px);
}

#canvas_holder {
  position: relative;
}

canvas {
  position: absolute;
  left: 0;
  top: 0;
}

.hide {
  display: none;
}

.blur {
  filter: blur(15px) !important;
}

.sharp {
  filter: blur(0px) !important;
}

JavaScript

// css3 part
 var $s1 = $('#s1');
 var $b1 = $('#b1');
 b1.onload = function() {
   $s1.hide();
   $b1.show();
 // 如果先出现display:block再remove/addClass 真实行为其实是先remove/addClass再display: block。所以这里用了setTimeout~
   setTimeout(function() {
     $b1.removeClass('blur')
   }, 100)
 }

 // canvas part
 var $s2 = $('#s2'),
   $b2 = $('#b2');
 var canvas = $('canvas')[0];
 var ctx = canvas.getContext('2d');
 var blur = 20,
   blurGap = 1;
 var blurToSharp;
 ctx.filter = 'blur(' + blur + 'px)';

 function blurLoop() {
   blur -= blurGap;
   if (blur <= 0) clearInterval(blurToSharp);
   ctx.clearRect(0, 0, canvas.width, canvas.height);
   ctx.filter = 'blur(' + blur + 'px)';
   ctx.drawImage(b2, 0, 0, canvas.width, canvas.height);
 }

 s2.onload = function() {
   ctx.drawImage(s2, 0, 0, canvas.width, canvas.height);
 }
 b2.onload = function() {
 blurToSharp = setInterval(blurLoop, 100);
 }