paulo@124: window.addEventListener('load', lazyLoadImages);
paulo@124: window.addEventListener('DOMContentLoaded', lazyLoadImages);
paulo@124: window.addEventListener('resize', lazyLoadImages);
paulo@124: window.addEventListener('scroll', lazyLoadImages);
paulo@124: 
paulo@124: function lazyLoadImages() {
paulo@124: 	var images = document.getElementsByTagName('img');
paulo@124: 	var loaded = 0;
paulo@124: 
paulo@124: 	for (var i = 0; i < images.length; i++) {
paulo@124: 		var img = images[i];
paulo@124: 		if (img.hasAttribute('data-src')) {
paulo@124: 			if (isElementInViewport(img)) {
paulo@124: 				img.setAttribute('src', img.getAttribute('data-src'));
paulo@124: 				img.removeAttribute('data-src');
paulo@124: 			}
paulo@124: 		} else {
paulo@124: 			loaded++;
paulo@124: 		}
paulo@124: 	}
paulo@124: 
paulo@124: 	//console.log('Loaded images:' + loaded + '/' + images.length);
paulo@124: 
paulo@124: 	if (loaded == images.length) {
paulo@124: 		//console.log('Loaded all images.');
paulo@124: 		window.removeEventListener('load', lazyLoadImages);
paulo@124: 		window.removeEventListener('DOMContentLoaded', lazyLoadImages);
paulo@124: 		window.removeEventListener('resize', lazyLoadImages);
paulo@124: 		window.removeEventListener('scroll', lazyLoadImages);
paulo@124: 	}
paulo@124: }
paulo@124: 
paulo@124: function isElementInViewport(el) {
paulo@124: 	var rect = el.getBoundingClientRect();
paulo@124: 
paulo@124: 	return (
paulo@124: 		rect.top >= 0 &&
paulo@124: 		rect.left >= 0 &&
paulo@124: 		rect.top <= window.innerHeight &&
paulo@124: 		rect.left <= window.innerWidth
paulo@124: 	);
paulo@124: }