1

我目前使用两种技术将图像加载到我的网页中。首先，我LazyLoad用来处理首屏以下的图像。这种技术似乎运作良好。我使用的第二种技术是用于首屏但最初隐藏在视图之外的图像，它们通常使用 onclickorhover事件向用户显示。我使用的延迟技术是在页面加载后（onload事件触发时）加载所有这些图像。

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

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

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

谢谢你的帮助。

4

1 回答 1

0

我不知道您是否加载了其他技术，但我看到加载的技术来自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>

于 2019-03-08T15:42:03.837 回答