Skip to content

J
joshine
Commit aab986ec by lmf
Options

优化首页延迟加载

parent 9817873a
Showing with 4 additions and 35 deletions
app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/flashsaleproduct.phtml
...@@ -16,7 +16,7 @@ foreach($ids as $pid): ...@@ -16,7 +16,7 @@ foreach($ids as $pid):
?> ?>
<div class="flash-sale-item"> <div class="flash-sale-item">
<a href="<?php echo $product->getProductUrl()?>" > <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"> <div class="flash-sale-info">
<a class="product-name" href="<?php echo $product->getProductUrl()?>"><?php echo $product->getName();?></a> <a class="product-name" href="<?php echo $product->getProductUrl()?>"><?php echo $product->getName();?></a>
<?= $blocklist->getReviewsSummaryHtml($product, $templateType) ?> <?= $blocklist->getReviewsSummaryHtml($product, $templateType) ?>
......
app/design/frontend/Joshine/breeze/Magento_Cms/templates/default/home.phtml
...@@ -56,7 +56,7 @@ ...@@ -56,7 +56,7 @@
</style> </style>
<div class="banner1"></div> <div class="banner1"></div>
<a href="#top" title="go to header" id="topBtn" style="display: none;"> <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> </a>
<script> <script>
require([ require([
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
this._obj.init = function(){ this._obj.init = function(){
var str = ``; var str = ``;
for(var i=0;i<this.img.length;i++){ 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({ that.html(`<div class="imgbox">${str}</div>`).css({
"width":"100%", "width":"100%",
...@@ -284,39 +284,8 @@ ...@@ -284,39 +284,8 @@
$('.columns').css('margin-top',headerH); $('.columns').css('margin-top',headerH);
} }
}); });
</script> </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_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('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('flashsaleproduct')->toHtml();?>
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('home_category_thumnail')->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): ...@@ -26,7 +26,7 @@ foreach($ids as $pid):
?> ?>
<div class="flash-sale-item"> <div class="flash-sale-item">
<a href="<?php echo $product->getProductUrl()?>" > <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"> <div class="flash-sale-info">
<a class="product-name" href="<?php echo $product->getProductUrl()?>"><?php echo $product->getName();?></a> <a class="product-name" href="<?php echo $product->getProductUrl()?>"><?php echo $product->getName();?></a>
<?= $blocklist->getReviewsSummaryHtml($product, $templateType) ?> <?= $blocklist->getReviewsSummaryHtml($product, $templateType) ?>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment