Commit e18c248a by halweg

Merge branch 'developer' of http://47.99.244.21:9999/root/joshine into developer

parents 0b9ddc93 6ad327b9
...@@ -120,9 +120,9 @@ $_helper = $block->getData('outputHelper'); ...@@ -120,9 +120,9 @@ $_helper = $block->getData('outputHelper');
<?php <?php
$productImageRaw = $imageHelper->init($_product, $imageDisplayArea)->setImageFile($productImage->getFile())->resize($productImage->getWidth(),$productImage->getHeight())->getUrl(); $productImageRaw = $imageHelper->init($_product, $imageDisplayArea)->setImageFile($productImage->getFile())->resize($productImage->getWidth(),$productImage->getHeight())->getUrl();
?> ?>
<img class="product-image-photo" style="background-color: #F0F0F0;border: none;" data-src="<?= $productImageRaw ?>" loading="lazy" width="<?= $productImage->getWidth() ?>px" height="<?= $productImage->getHeight() ?>px" /> <img class="product-image-photo" style="background-color: #F0F0F0;border: none;" src="<?= $productImageRaw ?>" loading="lazy" width="<?= $productImage->getWidth() ?>px" height="<?= $productImage->getHeight() ?>px" />
<?php if ($hoverImg): ?> <?php if ($hoverImg): ?>
<img class="hoverImg" width="<?= $productImage->getWidth() ?>px" height="<?= $productImage->getHeight() ?>px" data-src="<?= $hoverImg ?>" loading="lazy" /> <img class="hoverImg" width="<?= $productImage->getWidth() ?>px" height="<?= $productImage->getHeight() ?>px" src="<?= $hoverImg ?>" loading="lazy" />
<?php endif; ?> <?php endif; ?>
</a> </a>
<div class="product details product-item-details"> <div class="product details product-item-details">
...@@ -237,41 +237,4 @@ $_helper = $block->getData('outputHelper'); ...@@ -237,41 +237,4 @@ $_helper = $block->getData('outputHelper');
'item' : <?= json_encode($items, true) ?> 'item' : <?= json_encode($items, true) ?>
}) })
</script> </script>
<script>
// 获取所有的图片标签
const imgs = document.getElementsByTagName("img");
// 获取可视区域的高度
const viewHeight =
window.innerHeight || document.documentElement.clientHeight;
// num用于统计当前显示到了哪一张图片,避免每次都从第一张图片开始检查是否露出
let num = 0;
function lazyload() {
for (let i = num; i < imgs.length; i++) {
// 用可视区域高度减去元素顶部距离可视区域顶部的高度
let distance = viewHeight - imgs[i].getBoundingClientRect().top;
// 如果可视区域高度大于等于元素顶部距离可视区域顶部的高度,说明元素露出
if (distance >= 0) {
// 给元素写入真实的src,展示图片
imgs[i].src = imgs[i].getAttribute("data-src");
// 前i张图片已经加载完毕,下次从第i+1张开始检查是否露出
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;
// 监听Scroll事件,为了防止频繁调用,使用防抖函数优化一下
window.addEventListener("scroll", debounce(lazyload, 600), false);
</script>
<?php endif; ?> <?php endif; ?>
...@@ -25,12 +25,11 @@ $logoHeight = $logoSizeResolver !== null && $logoSizeResolver->getHeight() ...@@ -25,12 +25,11 @@ $logoHeight = $logoSizeResolver !== null && $logoSizeResolver->getHeight()
href="<?= $block->escapeUrl($block->getUrl('')) ?>" href="<?= $block->escapeUrl($block->getUrl('')) ?>"
title="<?= $block->escapeHtmlAttr($storeName) ?>" title="<?= $block->escapeHtmlAttr($storeName) ?>"
aria-label="store logo"> aria-label="store logo">
<img class="site-logo" data-src="<?= $block->escapeUrl($block->getLogoSrc()) ?>" src="<?= $block->escapeUrl($block->getLogoSrc()) ?>" <img class="site-logo" src="<?= $block->escapeUrl($block->getLogoSrc()) ?>"
title="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>" title="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
alt="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>" alt="<?= $block->escapeHtmlAttr($block->getLogoAlt()) ?>"
<?= $logoWidth ? 'width="' . $block->escapeHtmlAttr($logoWidth) . '"' : '' ?> <?= $logoWidth ? 'width="' . $block->escapeHtmlAttr($logoWidth) . '"' : '' ?>
<?= $logoHeight ? 'height="' . $block->escapeHtmlAttr($logoHeight) . '"' : '' ?> <?= $logoHeight ? 'height="' . $block->escapeHtmlAttr($logoHeight) . '"' : '' ?> />
loading="lazy" />
<?php if ($block->getRequest()->getModuleName() == "checkout") { ?> <?php if ($block->getRequest()->getModuleName() == "checkout") { ?>
<span class="secure-span"> <span class="secure-span">
<span class="cut-span" > <span class="cut-span" >
......
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