Improve homepage image loading

index.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>
+
+        function orderProjectGrid() {
             $('#project-grid').masonry({
                 // options
                 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>