优化首页延迟加载

app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/flashsaleproduct.phtml

@@ -16,7 +16,7 @@ foreach($ids as $pid):
     ?>
     <div class="flash-sale-item">
         <a href="<?php echo $product->getProductUrl()?>" >
-            <img data-src="<?php echo $productImage;?>" alt="Loading..." /></a>
+            <img src="<?php echo $productImage;?>" loading="lazy" /></a>
         <div class="flash-sale-info">
             <a class="product-name" href="<?php echo $product->getProductUrl()?>"><?php echo $product->getName();?></a>
             <?= $blocklist->getReviewsSummaryHtml($product, $templateType) ?>

app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/home.phtml

@@ -56,7 +56,7 @@
     </style>
     <div class="banner1"></div>
     <a href="#top" title="go to header" id="topBtn" style="display: none;">
-         <img data-src="<?php echo  $block->getViewFileUrl('images/goTop.png'); ?>" src="<?php echo $block->getViewFileUrl('images/goTop.png'); ?>">
+         <img loading="lazy" src="<?php echo $block->getViewFileUrl('images/goTop.png'); ?>">
     </a>
     <script>
         require([
@@ -79,7 +79,7 @@
                 this._obj.init = function(){
                     var str = ``;
                     for(var i=0;i<this.img.length;i++){
-                        str += `<a href="${this.href[i]}"><img alt="Loading..." data-src="${this.img[i]}" src="${this.img[i]}"></a>`
+                        str += `<a href="${this.href[i]}"><img loading="lazy" src="${this.img[i]}" src="${this.img[i]}"></a>`
                     }
                     that.html(`<div class="imgbox">${str}</div>`).css({
                         "width":"100%",
@@ -284,39 +284,8 @@
             $('.columns').css('margin-top',headerH);
         }
     });
-
-
     </script>
 <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_top_category_thumnail')->toHtml();?>
 <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_new_arrivals')->toHtml();?>
 <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('flashsaleproduct')->toHtml();?>
 <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_category_thumnail')->toHtml();?>
-<script>
-    const imgs = document.getElementsByTagName("img");
-    const viewHeight =
-        window.innerHeight || document.documentElement.clientHeight;
-    let num = 0;
-
-    function lazyload() {
-        for (let i = num; i < imgs.length; i++) {
-            let distance = viewHeight - imgs[i].getBoundingClientRect().top;
-            if (distance >= 0) {
-                imgs[i].src = imgs[i].getAttribute("data-src");
-                num = i + 1;
-            }
-        }
-    }
-
-    function debounce(fn, delay = 500) {
-        let timer = null;
-        return function (...args) {
-            if (timer) clearTimeout(timer);
-            timer = setTimeout(() => {
-                fn.call(this, args);
-            }, delay);
-        };
-    }
-
-    window.onload = lazyload;
-    window.addEventListener("scroll", debounce(lazyload, 600), false);
-</script>

app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/homenewproduct.phtml

@@ -26,7 +26,7 @@ foreach($ids as $pid):
     ?>
     <div class="flash-sale-item">
         <a href="<?php echo $product->getProductUrl()?>" >
-            <img data-src="<?php echo $productImage;?>" alt="Loading..." /></a>
+            <img loading="lazy" src="<?php echo $productImage;?>" /></a>
         <div class="flash-sale-info">
             <a class="product-name" href="<?php echo $product->getProductUrl()?>"><?php echo $product->getName();?></a>
             <?= $blocklist->getReviewsSummaryHtml($product, $templateType) ?>