Commit f5c0f2ed by lmf

优化图片分屏加载

parent 0a189e71
...@@ -285,8 +285,38 @@ ...@@ -285,8 +285,38 @@
} }
}); });
</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>
...@@ -7,34 +7,6 @@ ...@@ -7,34 +7,6 @@
?> ?>
<?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('public_footer')->toHtml();?> <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('public_footer')->toHtml();?>
<script> <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([ require([
'jquery' 'jquery'
], function ($) { ], function ($) {
......
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