Dial Up Images

dialup.js

// Dial-up modem image loading using canvas. Relive the glory days of the internet
//
// Usage:
// <canvas class="image-canvas" width="180" height="180" data-image="http://lorempixel.com/180/180/">
//     <p>Image alt textc</p>
// </canvas>
//
 
window.onload = function() {
	var elements = document.getElementsByClassName("image-canvas");
	Array.prototype.forEach.call(elements, function(canvas) {
	    var context = canvas.getContext("2d");
		var img = new Image();
		var canvasHeight = canvas.offsetHeight;
  		img.src = canvas.getAttribute('data-image');
  		img.onload = function() {
  			var height = 0;

  			function animate(timestamp) {
  				height += Math.floor(Math.random()*10);
  				updateDelay = Math.floor(Math.random()*1000);
	
  				if (height > canvasHeight) {
  					height = canvasHeight;
  				}
  				context.drawImage(img, 0, 0, canvas.offsetWidth, height, 0, 0, canvas.offsetWidth, height);
	
  				if (height < canvasHeight) {
  					setTimeout(function(){window.requestAnimationFrame(animate)}, updateDelay); 
  				}
  			}
  			window.requestAnimationFrame(animate);
  		};
	});
};  

Nice! - In codepen form: http://codepen.io/anon/pen/jERmNm