Improve homepage image loading

index.html

@@ -1,7 +1,7 @@
 ---
 title: Home
 uses:
- - masonry
+- masonry
 ---
 
 {% include head.html %}
@@ -60,7 +60,7 @@ uses:
                     <div class="col-sm-4 project-item">
                         <div class="card home-project">
                             {% if project.hero %}
-                            <img src="{{project.hero.img_src}}" class="card-img-top" alt="">
+                            <img src="{{project.hero.img_src}}" class="card-img-top" alt="" loading="lazy">
                             {% endif %}
                             <div class="card-body">
                                 <h5 class="card-title"><strong>{{project.title}}</strong></h5>
@@ -82,12 +82,6 @@ uses:
             </div>
         </div>
 
-        <!-- <div class="home-third-panel">
-            <div class="inner-content-container home-content container">
-                
-            </div>
-        </div> -->
-
     </div>
 
     <!-- Xss warning -->
@@ -102,12 +96,21 @@ uses:
 
     <!-- Project grid -->
     <script>
-        $('#project-grid').masonry({
+
-            // options
+        function orderProjectGrid() {
-            itemSelector: '.project-item',
+            $('#project-grid').masonry({
-            // columnWidth: 500,
+                // options
-            transitionDuration: '0s'
+                itemSelector: '.project-item',
-        });
+                // columnWidth: 500,
+                transitionDuration: '0s'
+            });
+        }
+
+        // Do a primary order call
+        orderProjectGrid();
+
+        // re-order in 2 seconds in case anything was still lazy-loading
+        setTimeout(orderProjectGrid, 2000);
     </script>
 
 </body>