在 SharePoint Online 中延迟加载图像和 JavaScript

本文介绍了如何使用 JavaScript 延迟图像加载并在加载页面后再加载不必要的 JavaScript 以减少 SharePoint Online 页面加载时间。

图像可降低 SharePoint Online 上的页面加载速度。默认情况下,大多数新式 Internet 浏览器会在加载 HTML 页面时预提取图像。这可能会导致一个问题:如果屏幕上未显示图像,则用户向下滚动屏幕之前页面加载速度会很慢。图像会阻止浏览器加载页面的可见部分。若要解决此问题,可使用 JavaScript 跳过“先加载图像”操作。此外,加载不必要的 JavaScript 也会降低 SharePoint 页面的加载速度。本主题介绍了使用 SharePoint Online 中的 JavaScript 来缩短页面加载时间的几种方法。

使用 JavaScript 延迟 SharePoint Online 页面中的图像加载,进而缩短页面加载时间

可使用 JavaScript 防止 Web 浏览器预提取图像。这会使整体文档更快呈现。为此,请从 <img> 标记删除 src 属性的值,并将其替换为数据属性中某个文件的路径,如 data-src。例如:

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

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

若要达到这些效果,需使用 JavaScript。

在文本文件中定义 isElementInViewport()    函数,检查某个元素是否属于对用户可见的浏览器。

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    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 Online,需要将以下函数附加到 #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 Online 中的母版页。为此,请将脚本链接添加到母版页的标题中。添加到母版页后,JavaScript 将应用到 SharePoint Online 网站中使用该母版页面布局的所有页面。或者,如果仅打算在网站的一个页面上使用它,请使用脚本编辑器 Web 部件将 JavaScript 嵌入页面。有关详细信息,请参阅以下主题:

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

为使其正常工作,还需要引用母版页中的 jQuery。下例中,可在初始页面加载中看见仅加载了一个图像,而页面上有若干图像。

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

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

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

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

GitHub 代码示例:插入 JavaScript 以提高性能

请记住查看 GitHub 上提供的 JavaScript injection(JavaScript 注入)文章和代码示例。

另请参阅

Office 2013 和 Office 365 ProPlus 中支持的浏览器

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

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

扩展你的技能
了解培训
抢先获得新功能
加入 Office 预览体验计划

此信息是否有帮助?

谢谢您的反馈!

谢谢你的反馈! 可能需要转接到 Office 支持专员。

×