Merge pull request #3 from Shamsudeen12/image-edit

Added A specified height for each thumbnail and lazy loading for imag…

public/js/script.js

@@ -0,0 +1,6 @@
+[].forEach.call(document.querySelectorAll('img[data-src]'),    function(img) {
+  img.setAttribute('src', img.getAttribute('data-src'));
+  img.onload = function() {
+    img.removeAttribute('data-src');
+  };
+});

public/styles/main.css

@@ -36,12 +36,21 @@ a:visited {
 /* image stying */
 .thumbnail img {
   width: 100%;
+  opacity: 1;
+  transition: opacity 0.3s;
+}
+
+.thumbnail img[data-src] {
+  opacity: 0;
 }
 
 .thumbnail {
   padding: 0;
 }
 
+.campground__image {
+  height: 150px;
+}
 /* tent logo */
 span .align-bottom {
   vertical-align: bottom;
@@ -82,4 +91,3 @@ span .align-bottom {
     height: 400px;
     width: 100%;
 }
-

views/campgrounds/index.ejs

@@ -17,15 +17,15 @@
   </header>
 
   <div class="row text-center" style="display: flex; flex-wrap: wrap;">
-    <% if (noMatch !== null) {%>  
+    <% if (noMatch !== null) {%>
       <div class="col-md-12">
         <h4><%= noMatch %></h4>
       </div>
     <% } %>
     <% campgrounds.forEach(campground => {%>
       <div class="col-md-3 col-sm-6">
         <div class="thumbnail card">
-          <img src="<%= campground.image.url %>" alt="<%= campground.name %>" />
+          <img class="campground__image" data-src="<%= campground.image.url %>" alt="<%= campground.name %>" />
           <div class="caption">
             <h4 class="caption"><%= campground.name %></h4>
           </div>

views/partials/footer.ejs

@@ -9,5 +9,6 @@
   src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
   integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
   crossorigin="anonymous"></script>
+  <script src="/js/script.js"></script>
 </body>
-</html>
+</html>