通过

延迟在 SharePoint 中加载图像和 JavaScript

  • 项目

本文介绍如何通过使用 JavaScript 来延迟加载图像，以及在页面加载后等待加载不需要的 JavaScript 来减少 SharePoint 页面的加载时间。

图像可能会对 SharePoint 上的页面加载速度产生负面影响。 默认情况下，大多数现代 Internet 浏览器在加载 HTML 页面时会预提取图像。 如果在用户向下滚动之前，图像在屏幕上不可见，此过程可能会导致页面加载缓慢。 图像可能会阻止浏览器加载页面的可见部分。 若要解决此问题，可以使用 JavaScript 首先跳过加载图像。 此外，加载不需要的 JavaScript 也会减慢 SharePoint 页面上的下载时间。 本文介绍一些可用于在 SharePoint 中使用 JavaScript 改进页面加载时间的方法。

通过使用 JavaScript 延迟 SharePoint 页面中的图像加载来缩短页面加载时间

可以使用 JavaScript 来防止 Web 浏览器预提取图像。 此技术可加快整体文档呈现速度。 为此，请从 <img> 标记中删除 src 属性的值，并将其替换为数据属性中文件的路径，例如：data-src。 例如：

<img src="" data-src="/sites/NavigationBySearch/_catalogs/masterpage/media/microsoft-white-8.jpg" />

在此方法中，浏览器不会立即下载图像。 如果图像已在视区中，JavaScript 会告知浏览器从数据属性检索 URL，并将其作为 src 属性的值插入。 图像仅在用户滚动并进入视图中时才加载。

若要执行此函数，需要使用 JavaScript。

在文本文件中，定义 isElementInViewport () 函数以检查元素是否位于用户可见的浏览器部分。

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &amp;&amp;
    rect.left >= 0 &amp;&amp;
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

接下来，在 loadItemsInView () 函数中使用 isElementInViewport () 。 loadItemsInView () 函数加载具有 data-src 属性值的所有图像（如果它们位于用户可见的浏览器部分）。 将以下函数添加到文本文件：

function loadItemsInView() {
  //Select elements by the row id.
  $("#row [data-src]").each(function () {
      var isVisible = isElementInViewport(this);
      if (isVisible) {
          if ($(this).attr("src") == undefined) {
              $(this).attr("src", $(this).data("src"));
          }
      }
  });
}

最后，从 window.onscroll () 调用 loadItemsInView () ，如以下示例所示。 此函数可确保视区中的任何图像在用户需要时加载，但之前不会加载。 将以下内容添加到文本文件：

//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
    loadItemsInView();
});

对于 SharePoint，您需要将以下函数附加到 #s4-workspace <div> 标记上的滚动事件，因为窗口事件将被重写，以确保功能区仍附加到页面顶部。

//Keep the ribbon at the top of the page
$('#s4-workspace').on("scroll", function () {
    loadItemsInView();
});

将文本文件另存为扩展名为 .js 的 JavaScript 文件，例如 delayLoadImages.js。

编写完 delayLoadImages.js 后，可以通过在母版页标题中添加脚本链接，将文件的内容添加到 SharePoint 中的母版页。 在母版页中后，JavaScript 将应用于 SharePoint 网站中使用该母版页布局的所有页面。 或者，如果只想在网站的一页上使用该功能，请使用脚本编辑器 Web 部件将 JavaScript 嵌入页面。 有关更多信息，请参阅：

示例：从 SharePoint 中的母版页引用 JavaScript delayLoadImages.js 文件

若要使此示例正常工作，还需要在母版页中引用 jQuery。 在以下示例中，可以看到初始页面加载中只加载了一个图像，但页面上还有几个图像。

显示页面上加载的一个图像的屏幕截图。

以下屏幕截图显示滚动到视图中后下载的其余图像。

显示页面上加载的多个图像的屏幕截图。

使用 JavaScript 延迟图像加载是提高性能的有效方法;但是，如果在公共网站上应用该技术，则搜索引擎无法像对定期形成的图像进行爬网一样对图像进行爬网。 此方法可能会影响搜索引擎的排名，因为图像本身的元数据在页面加载之前不存在。 搜索引擎爬网程序仅读取 HTML，因此无法将图像视为页面上的内容。 图像是用于在搜索结果中对页面进行排名的因素之一。 解决方法是对图像使用介绍性文本。

GitHub 代码示例：注入 JavaScript 以提高性能

请勿错过 GitHub 上提供的 有关 JavaScript 注入 的文章和代码示例。

另请参阅

Office 2013 和 Microsoft 365 企业应用版 中支持的浏览器

如何：向 SharePoint 2013 中的网站应用母版页

如何：在 SharePoint 2013 中创建页面布局