# HG changeset patch
# User paulo
# Date 1455177739 28800
# Node ID ec48011dca1e81cd7d9047004a26deead9c9687f
# Parent  d6acf8b093b71083acb4ba0904de22c5b9afff0f
pics2: lazy load images in index page

diff -r d6acf8b093b7 -r ec48011dca1e pics2/lazyload.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/pics2/lazyload.js	Thu Feb 11 00:02:19 2016 -0800
@@ -0,0 +1,42 @@
+window.addEventListener('load', lazyLoadImages);
+window.addEventListener('DOMContentLoaded', lazyLoadImages);
+window.addEventListener('resize', lazyLoadImages);
+window.addEventListener('scroll', lazyLoadImages);
+
+function lazyLoadImages() {
+	var images = document.getElementsByTagName('img');
+	var loaded = 0;
+
+	for (var i = 0; i < images.length; i++) {
+		var img = images[i];
+		if (img.hasAttribute('data-src')) {
+			if (isElementInViewport(img)) {
+				img.setAttribute('src', img.getAttribute('data-src'));
+				img.removeAttribute('data-src');
+			}
+		} else {
+			loaded++;
+		}
+	}
+
+	//console.log('Loaded images:' + loaded + '/' + images.length);
+
+	if (loaded == images.length) {
+		//console.log('Loaded all images.');
+		window.removeEventListener('load', lazyLoadImages);
+		window.removeEventListener('DOMContentLoaded', lazyLoadImages);
+		window.removeEventListener('resize', lazyLoadImages);
+		window.removeEventListener('scroll', lazyLoadImages);
+	}
+}
+
+function isElementInViewport(el) {
+	var rect = el.getBoundingClientRect();
+
+	return (
+		rect.top >= 0 &&
+		rect.left >= 0 &&
+		rect.top <= window.innerHeight &&
+		rect.left <= window.innerWidth
+	);
+}
diff -r d6acf8b093b7 -r ec48011dca1e pics2/pics_app.py
--- a/pics2/pics_app.py	Wed Jan 27 01:50:15 2016 -0700
+++ b/pics2/pics_app.py	Thu Feb 11 00:02:19 2016 -0800
@@ -108,12 +108,17 @@
 		return (root, header, body)
 	
 	
-	def _go_thumbnail_links_to_browse_imgs_html_body(self, body, t, b, a_args={}, img_args={}):
+	def _go_thumbnail_links_to_browse_imgs_html_body(self, body, t, b, a_args={}, img_args={}, lazyload=False):
 		thumb_img_url = self._get_pics_url(t)
 		browse_url = self._get_app_url(b)
 
 		a = body.a(href=browse_url, **a_args)
-		a.img(src=thumb_img_url, **img_args)
+		if lazyload:
+			img_args = dict(img_args)
+			img_args["data-src"] = thumb_img_url
+			a.img(**img_args)
+		else:
+			a.img(src=thumb_img_url, **img_args)
 
 		body.text(' ')
 	
@@ -167,17 +172,19 @@
 	
 
 	def page_index(self):
-		n = 5 # number of thumbnails to display
+		n = 5 # number of thumbnails to display per dir
 
 		(html_root, html_header, html_body) = self._get_standard_html_doc("Pictures")
 	
+		html_header.script('', type="text/javascript", src=self._get_pics_url("lazyload.js"))
+	
 		pics_dirs = []
 		for i in os.listdir('.'):
 			if _is_pics_dir(i):
 				pics_dirs.append((i, _get_dir_dt(i)))
 	
 		pics_dirs.sort(key=lambda x: x[1], reverse=True)
-	
+
 		for (d, dt) in pics_dirs:
 			html_body.h2.a(d, href=self._get_app_url(d))
 			html_body.h3(_format_dt(dt))
@@ -190,8 +197,8 @@
 			
 			html_p = html_body.p
 			for (i, (t, b)) in sampled_imgs_idx:
-				self._go_thumbnail_links_to_browse_imgs_html_body(html_p, t, b)
-			
+				self._go_thumbnail_links_to_browse_imgs_html_body(html_p, t, b, lazyload=True)
+
 		return html_root