Lazy loading for screenshots

quassy · Feb 21, 2016 · 525631d · 525631d
1 parent 11fb683
commit 525631d
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/_includes/app_teaser.html b/_includes/app_teaser.html
@@ -1,7 +1,10 @@
 {% if post.screenshots %}
   <div id="screenshots">
     {% for screenshot in post.screenshots %}
-      <img src="{{ site.baseurl }}/img/windows/{{ screenshot }}" alt="Screenshot of {{ post.title }}" />
+      <img src="{ site.baseurl }}/img/windows/placeholder.png" data-src="{{ site.baseurl }}/img/windows/{{ screenshot }}" alt="Screenshot of {{ post.title }}" />
+      <noscript>
+        <img src="{{ site.baseurl }}/img/windows/{{ screenshot }}" alt="Screenshot of {{ post.title }}" />
+      </noscript>
     {% endfor %}
   </div>
   <p id="showcase" style="text-align:center">

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -12,9 +12,13 @@
   <![endif]-->
   <!-- load jQuery and tablesorter scripts -->
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
+  <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/unveil/1.3.0/jquery.unveil.min.js"></script>
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.18.4/js/jquery.tablesorter.min.js"></script>
   <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.18.4/js/jquery.tablesorter.widgets.min.js"></script>
   <script type="text/javascript">
+    $(document).ready(function() {
+      $("img").unveil();
+    });
     $(function(){
       $(".tablesorter").tablesorter();
     });

diff --git a/img/windows/placeholder.png b/img/windows/placeholder.png