Added low res image preloading to drawings and photos.

KartoffelCheetah · Feb 10, 2018 · 8fc5ba2 · 8fc5ba2
1 parent d99e5c5
commit 8fc5ba2
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 2 deletions.
diff --git a/server.py b/server.py
@@ -103,6 +103,7 @@ def photos(folder, img):
                 'thumbnail':pathJoin(IMAGES,THUMBNAILS,PHOTOS,url)
             } for url,title in phs
         ]
+        img['thumbnail'] = pathJoin(IMAGES,THUMBNAILS,PHOTOS,img['url'])
         img['url'] = pathJoin(IMAGES,PHOTOS,img['url'])
     except Exception as e:
         print('\x1b[31m', e, '\x1b[0m')
@@ -130,6 +131,7 @@ def drawings(img):
                 'thumbnail':pathJoin(IMAGES,THUMBNAILS,DRAWINGS,url)
             } for url,title in phs
         ]
+        img['thumbnail'] = pathJoin(IMAGES,THUMBNAILS,DRAWINGS,img['url'])
         img['url'] = pathJoin(IMAGES,DRAWINGS,img['url'])
     except Exception as e:
         print('\x1b[31m', e, '\x1b[0m')

diff --git a/static/css/master.css b/static/css/master.css
@@ -215,13 +215,20 @@ body {
 }
 #TheImage canvas,
 #TheImage img {
+  position: relative;
   max-width: 100%;
   max-height: 100%;
   display: block;
   margin: auto;
   padding: 2px;
   border: 2px solid #d2d2d2;
 }
+#TheImage canvas[aria-hidden],
+#TheImage img[aria-hidden] {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 .photo-desc,
 .photo-meta {
   padding: 0.7rem;

diff --git a/static/css/photos.styl b/static/css/photos.styl
@@ -43,12 +43,17 @@
 	cursor: pointer
 	background-color: primaryColorD3
 	canvas,img
+		position: relative
 		max-width: 100%
 		max-height: 100%
 		display: block
 		margin: auto
 		padding: 2px
 		border: 2px solid primaryColor
+	canvas[aria-hidden],img[aria-hidden]
+		position: absolute
+		top: 0
+		left: 0
 .photo-desc,
 .photo-meta
 	padding: mediumWidth

diff --git a/templates/drawings.html.j2 b/templates/drawings.html.j2
@@ -9,7 +9,8 @@
     <div class="wrap-photos">
         <header>{{img.title}}</header>
         <div id="TheImage">
-            <img src="{{staticPATH+img.url}}" alt="{{img.title}}">
+            <img src="{{staticPATH+img.thumbnail}}" aria-hidden="true" width="{{img.xres}}">
+            <img src="{{staticPATH+img.url}}" alt="{{img.title}}" onload="$('#TheImage img[aria-hidden]').hide()">
         </div>
         <div class="photo-main">
             <div class="photo-slider">

diff --git a/templates/photos.html.j2 b/templates/photos.html.j2
@@ -9,7 +9,8 @@
     <div class="wrap-photos">
         <header>{{img.title}}</header>
         <div id="TheImage">
-            <img src="{{staticPATH+img.url}}" alt="{{img.title}}">
+            <img src="{{staticPATH+img.thumbnail}}" aria-hidden="true" width="{{img.xres}}">
+            <img src="{{staticPATH+img.url}}" alt="{{img.title}}" onload="$('#TheImage img[aria-hidden]').hide()">
         </div>
         <div class="photo-main">
             <div class="photo-slider">