如何处理折叠上方的隐藏图像

Question

我目前使用两种技术将图像加载到我的网页中。首先，我使用LazyLoad处理折叠后的图像。这项技术似乎运作良好。我使用的第二种技术是折叠图像上方的图像，但这些图像最初是不可见的，通常使用onclick或hover事件向用户显示。我使用的 defer 技术是在页面加载后（onload事件触发时）加载所有这些图像。

Google Page Speed Insights 似乎不喜欢我的 defer 技术，并将这些隐藏的图像报告为“推迟离屏图像”下的一个机会。我已经意识到onload事件和Google在 Page Speed Insights 中使用的Time to Interactive（TTI）“事件”之间存在差异。 任何人都可以就JavaScript技术提出建议，以取代可以满足Google条件的我的“ defer ”技术。

以下是我从 Page Speed Insights 收到的消息。这里提到的所有图像都是折叠上方的隐藏图像，这些图像是在onload事件触发后加载的。

这是瀑布图，显示了在加载事件之后加载了图像。1

感谢您的帮助。

Answer 1

我不知道您是否还加载了其他技术，但是我看到的一种技术来自bootstrapBundle.js

更新

删除所有隐藏图像的类hidden-xs hidden-sm，并在页面加载之后添加它们。另外，再次添加类lazy，让bootstrapBundle.js技术处理它们。

$(document).ready(function () {
  // Select your images by class 'deferImage'
  var imgDefer = $('.deferImage');
  // Loop through them and add classes 
  for (var i = 0; i < imgDefer.length; i++) {
    $(imgDefer[i]).addClass('hidden-xs hidden-sm');
  }
});

我已经对其进行了测试，它似乎可以正常工作。请遵循以下示例：

示例：

$(document).ready(function() {
  // Select your images based on class 'deferImage'
  var imgDefer = $('.deferImage');
  // Loop through them and add classes 
  for (var i = 0; i < imgDefer.length; i++) {
    $(imgDefer[i]).addClass('hidden-xs hidden-sm');
  }
});

img {
  width: 100%;
  height: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://www.cartridgemonkey.com/bundles/bootstrapBundle.js"></script>

<div class="container">
  <div class="row">
    <div class="col-md-4">
      <div class="item2"><img alt="..." class="popup g-cur-p deferImage lazy" data-original="https://source.unsplash.com/500x500" data-popupname="pwGuide1" data-target="#popup" data-toggle="modal"></div>
    </div>
    <div class="col-md-4">

      <div class="item2"><img alt="..." class="popup g-cur-p deferImage lazy" data-original="https://source.unsplash.com/500x500" data-popupname="pwGuide2" data-target="#popup" data-toggle="modal"></div>
    </div>
    <div class="col-md-4">

      <div class="item2"><img alt="..." class="popup g-cur-p deferImage lazy" data-original="https://source.unsplash.com/500x500" data-popupname="pwGuide3" data-target="#popup" data-toggle="modal"></div>
    </div>
  </div>
</div>