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 +}

     2.1 --- a/pics2/pics_app.py	Wed Jan 27 01:50:15 2016 -0700
     2.2 +++ b/pics2/pics_app.py	Thu Feb 11 00:02:19 2016 -0800
     2.3 @@ -108,12 +108,17 @@
     2.4  		return (root, header, body)
     2.5  	
     2.6  	
     2.7 -	def _go_thumbnail_links_to_browse_imgs_html_body(self, body, t, b, a_args={}, img_args={}):
     2.8 +	def _go_thumbnail_links_to_browse_imgs_html_body(self, body, t, b, a_args={}, img_args={}, lazyload=False):
     2.9  		thumb_img_url = self._get_pics_url(t)
    2.10  		browse_url = self._get_app_url(b)
    2.11  
    2.12  		a = body.a(href=browse_url, **a_args)
    2.13 -		a.img(src=thumb_img_url, **img_args)
    2.14 +		if lazyload:
    2.15 +			img_args = dict(img_args)
    2.16 +			img_args["data-src"] = thumb_img_url
    2.17 +			a.img(**img_args)
    2.18 +		else:
    2.19 +			a.img(src=thumb_img_url, **img_args)
    2.20  
    2.21  		body.text(' ')
    2.22  	
    2.23 @@ -167,17 +172,19 @@
    2.24  	
    2.25  
    2.26  	def page_index(self):
    2.27 -		n = 5 # number of thumbnails to display
    2.28 +		n = 5 # number of thumbnails to display per dir
    2.29  
    2.30  		(html_root, html_header, html_body) = self._get_standard_html_doc("Pictures")
    2.31  	
    2.32 +		html_header.script('', type="text/javascript", src=self._get_pics_url("lazyload.js"))
    2.33 +	
    2.34  		pics_dirs = []
    2.35  		for i in os.listdir('.'):
    2.36  			if _is_pics_dir(i):
    2.37  				pics_dirs.append((i, _get_dir_dt(i)))
    2.38  	
    2.39  		pics_dirs.sort(key=lambda x: x[1], reverse=True)
    2.40 -	
    2.41 +
    2.42  		for (d, dt) in pics_dirs:
    2.43  			html_body.h2.a(d, href=self._get_app_url(d))
    2.44  			html_body.h3(_format_dt(dt))
    2.45 @@ -190,8 +197,8 @@
    2.46  			
    2.47  			html_p = html_body.p
    2.48  			for (i, (t, b)) in sampled_imgs_idx:
    2.49 -				self._go_thumbnail_links_to_browse_imgs_html_body(html_p, t, b)
    2.50 -			
    2.51 +				self._go_thumbnail_links_to_browse_imgs_html_body(html_p, t, b, lazyload=True)
    2.52 +
    2.53  		return html_root
    2.54  	
    2.55