lazy load images with jquery

ShMcK · ShMcK · commit f8daec648d0d · 2016-07-03T16:49:26.000-07:00
diff --git a/_includes/language-icon.html b/_includes/language-icon.html
@@ -1,6 +1,6 @@
 <li>
   <span class="icon">
-    <img alt="{{include.language}}"
+    <img alt="{{include.language}}" class="lazy"
       src="images/devicons/{{include.icon}}"
       height="75px"
       width="75px"/>
diff --git a/_includes/modal.html b/_includes/modal.html
@@ -1,6 +1,6 @@
 <div id="{{include.id}}" class="modal">
   <div id="btn-close-modal" class="close-{{include.id}}">
-    <img src="css/images/close.svg" alt="close" height="35px" width="35px"/>
+    <img src="css/images/close.svg" alt="close" height="35px" width="35px" class="lazy"/>
   </div>
   <div class="modal-content">
 		<h3>{{include.title}}</h3>
diff --git a/_includes/scripts.html b/_includes/scripts.html
@@ -10,5 +10,6 @@
 <script src="{{ " /js/main.min.js " | prepend: site.baseurl }}"></script>
 <script src="{{ " /js/modals.min.js " | prepend: site.baseurl }}"></script>
 <script src="{{ " /js/lib/png2gif.min.js " | prepend: site.baseurl }}"></script>
+<script src="{{ " /js/lib/jquery.lazyload.min.js " | prepend: site.baseurl }}"></script>
 <script>!function(e,t,a,n,c,s,o){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,s=t.createElement(a),o=t.getElementsByTagName(a)[0],s.async=1,s.src=n,o.parentNode.insertBefore(s,o)}(window,document,"script","https://www.google-analytics.com/analytics.js","ga"),ga("create","UA-44377274-8","auto"),ga("send","pageview");
 </script>
diff --git a/index.html b/index.html
@@ -40,12 +40,12 @@ <h2>{{summary.title}}</h2>
 		<div class="image">
 			{% if feature.image.alt %}
 			<a id="{{feature.image.id}}" href="#{{feature.image.href}}" class="modal-link">
-				<img alt="{{feature.image.alt}}"
+				<img alt="{{feature.image.alt}}" class="lazy"
 				src="{{feature.image.src}}"
 				height="328px" width="574px"/>
 			</a>
 			{% else %}
-				<img alt="{{feature.image.alt}}"
+				<img alt="{{feature.image.alt}}" class="lazy"
 					src="{{feature.image.src}}"
 					height="328px" width="574px" />
 			{% endif %}
diff --git a/js/lib/jquery.lazyload.min.js b/js/lib/jquery.lazyload.min.js
diff --git a/js/modals.js b/js/modals.js
@@ -1,4 +1,5 @@
 $(function() {
+  // modals
   $("#atom-coderoad").animatedModal({
     modalTarget: 'atom-coderoad-demo',
     animatedIn:'zoomIn',
@@ -15,4 +16,11 @@ $(function() {
         .attr("src", "images/demos/builder-demo.gif");
     }
   });
+
+  // images
+  $("img.lazy").lazyload({
+    effect: "fadeIn",
+    threshold : 200,
+  });
+
 });
diff --git a/js/modals.min.js b/js/modals.min.js
