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

【问题标题】：Lazy Load images initial images not showing延迟加载图像初始图像未显示
【发布时间】：2019-09-12 09:00:02
【问题描述】：

我的网站是使用 Smarty 模板构建的，我正在使用延迟加载来显示每页 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}

【问题讨论】：

为什么你在scroll、resize和orientationChange而不是直接在DOMContentLoaded上触发图像的“延迟加载”？
不确定如何将其实现到我拥有的代码中，感谢任何帮助

标签： javascript image smarty

【解决方案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，会拖累运行时性能（即它会导致卡顿）
is 使用非被动事件侦听器，这也可能导致卡顿 - 您可以轻松地 mark them as passive

一般来说，监听这些事件不再被认为是延迟加载的理想选择。 IntersectionObserver 是一种性能更高的替代方案。 yall.js 的源代码提供了一个出色且易于阅读的 IntersectionObserver 延迟加载示例。

【讨论】：