Question

我的网站是使用Smarty模板构建的，并且我正在使用Lazy Load来显示每页15张图像，我遇到的问题是最初未显示第一个图像（在视口中），它们仅在我开始时显示滚动时，任何想法都会使我立即看到初始图像。这是我必须延迟加载图像的代码

<script id="rendered-js">
document.addEventListener("DOMContentLoaded",        
function () {
var lazyloadImages = document.querySelectorAll("img.listing-photos");
var lazyloadThrottleTimeout;
function lazyload() {
if (lazyloadThrottleTimeout) {
  clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function () {
  var scrollTop = window.pageYOffset;
  lazyloadImages.forEach(function (img) {
    if (img.offsetTop < window.innerHeight + scrollTop) {
      img.src = img.dataset.src;
      img.classList.remove('lazy');
    }
  });
  if (lazyloadImages.length == 0) {
    document.removeEventListener("scroll", lazyload);
    window.removeEventListener("resize", lazyload);
    window.removeEventListener("orientationChange", lazyload);
  }
}, 2);
}
document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}); 
</script>

这是输出的HTML代码

{foreach from=$results item="entry"}
<div class="showlistings1">
<center>{if $entry.image != ""}<img class="listing-photos" 
data-src="/photos/{$entry.image|escape:"url"}" alt="{$entry.title}"/>
{else}<img class="listing-photos" data-src="/images/nophoto.gif" 
alt="{$entry.title}"/>{/if} <p><a href="/{$entry.link}" 
class="full-details">View Full Details</p></a></center>
</div>
{/foreach}

Answer 1

您已经定义了一个在DOMContentLoaded上运行的回调，这意味着DOM可用于分析。在设置事件监听器之前，只需调用一次lazyload函数即可。

<script id="rendered-js">
document.addEventListener("DOMContentLoaded",        
function () {
var lazyloadImages = document.querySelectorAll("img.listing-photos");
var lazyloadThrottleTimeout;
function lazyload() {
if (lazyloadThrottleTimeout) {
  clearTimeout(lazyloadThrottleTimeout);
}
lazyloadThrottleTimeout = setTimeout(function () {
  var scrollTop = window.pageYOffset;
  lazyloadImages.forEach(function (img) {
    if (img.offsetTop < window.innerHeight + scrollTop) {
      img.src = img.dataset.src;
      img.classList.remove('lazy');
    }
  });
  if (lazyloadImages.length == 0) {
    document.removeEventListener("scroll", lazyload);
    window.removeEventListener("resize", lazyload);
    window.removeEventListener("orientationChange", lazyload);
  }
}, 2);
}

// --- THE IMPORTANT LINE ---
lazyload();

document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}); 
</script>

我应该指出您实施中的几个性能问题。

它使用window.innerHeight，其中can trigger a reflow拖累了运行时性能（即，它造成了僵硬）
使用非被动事件侦听器，这也可能导致僵硬-您可以轻松mark them as passive

通常，听这些事件不再被认为是延迟加载的理想选择。 IntersectionObserver是性能更高的替代方案。 yall.js的源代码提供了一个很好的，易于阅读的IntersectionObserver延迟加载示例。

延迟加载图像初始图像未显示

1 个答案: