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

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>

我应该指出一些与您的实现有关的性能问题。

1. 它使用window.innerHeight，can trigger a reflow，拖累运行时性能（即它导致jankiness）
2. 使用非被动事件监听器，这也可能导致jankiness - 你可以很容易mark them as passive

通常，倾听这些事件不再被认为是延迟加载的理想选择。 IntersectionObserver是一种更高效的替代方案。 yall.js的源代码提供了一个优秀的，易于阅读的使用IntersectionObserver进行延迟加载的示例。