首页页面加载分屏实现

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 src="<?php echo $productImage;?>" /></a>
+            <img data-src="<?php echo $productImage;?>" alt="Loading..." /></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

@@ -58,7 +58,7 @@
                 this._obj.init = function(){
                     var str = ``;
                     for(var i=0;i<this.img.length;i++){
-                        str += `<a href="${this.href[i]}"><img src="${this.img[i]}"></a>`
+                        str += `<a href="${this.href[i]}"><img alt="Loading..." data-src="${this.img[i]}"></a>`
                     }
                     that.html(`<div class="imgbox">${str}</div>`).css({
                         "width":"100%",

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 src="<?php echo $productImage;?>" /></a>
+            <img data-src="<?php echo $productImage;?>" alt="Loading..." /></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_Theme/templates/html/footer.phtml

@@ -7,6 +7,34 @@
 ?>
 <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('public_footer')->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);
+
     require([
         'jquery'
     ], function ($) {

app/design/frontend/Joshine/breeze/Magento_Theme/templates/html/header/logo.phtml

@@ -25,7 +25,7 @@ $logoHeight = $logoSizeResolver !== null && $logoSizeResolver->getHeight()
         href="<?= $block->escapeUrl($block->getUrl('')) ?>"
         title="<?= $block->escapeHtmlAttr($storeName) ?>"
         aria-label="store logo">
-    <img src="<?= $block->escapeUrl($block->getLogoSrc()) ?>"
+    <img alt="Loading..." data-src="<?= $block->escapeUrl($block->getLogoSrc()) ?>"
          title="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
          alt="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
         <?= $logoWidth ? 'width="' . $block->escapeHtmlAttr($logoWidth) . '"' : '' ?>