Mercurial > hg > index.fcgi > www > www-1
diff pics2/lazyload.js @ 75:ec48011dca1e
pics2: lazy load images in index page
author | paulo |
---|---|
date | Thu, 11 Feb 2016 00:02:19 -0800 |
parents | |
children |
line diff
1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000 1.2 +++ b/pics2/lazyload.js Thu Feb 11 00:02:19 2016 -0800 1.3 @@ -0,0 +1,42 @@ 1.4 +window.addEventListener('load', lazyLoadImages); 1.5 +window.addEventListener('DOMContentLoaded', lazyLoadImages); 1.6 +window.addEventListener('resize', lazyLoadImages); 1.7 +window.addEventListener('scroll', lazyLoadImages); 1.8 + 1.9 +function lazyLoadImages() { 1.10 + var images = document.getElementsByTagName('img'); 1.11 + var loaded = 0; 1.12 + 1.13 + for (var i = 0; i < images.length; i++) { 1.14 + var img = images[i]; 1.15 + if (img.hasAttribute('data-src')) { 1.16 + if (isElementInViewport(img)) { 1.17 + img.setAttribute('src', img.getAttribute('data-src')); 1.18 + img.removeAttribute('data-src'); 1.19 + } 1.20 + } else { 1.21 + loaded++; 1.22 + } 1.23 + } 1.24 + 1.25 + //console.log('Loaded images:' + loaded + '/' + images.length); 1.26 + 1.27 + if (loaded == images.length) { 1.28 + //console.log('Loaded all images.'); 1.29 + window.removeEventListener('load', lazyLoadImages); 1.30 + window.removeEventListener('DOMContentLoaded', lazyLoadImages); 1.31 + window.removeEventListener('resize', lazyLoadImages); 1.32 + window.removeEventListener('scroll', lazyLoadImages); 1.33 + } 1.34 +} 1.35 + 1.36 +function isElementInViewport(el) { 1.37 + var rect = el.getBoundingClientRect(); 1.38 + 1.39 + return ( 1.40 + rect.top >= 0 && 1.41 + rect.left >= 0 && 1.42 + rect.top <= window.innerHeight && 1.43 + rect.left <= window.innerWidth 1.44 + ); 1.45 +}