在 SharePoint Online 中延遲載入圖片與 JavaScript

本文說明如何使用 JavaScript 延遲載入影像,以及等到頁面載入後才載入非必要的 JavaScript,以縮短 SharePoint Online 頁面的載入時間。

影像可能會對 SharePoint Online 上的頁面載入速度有負面影響。根據預設,大部分的新網際網路瀏覽器在載入 HTML 網頁時會預先擷取影像。如果要等到使用者向下捲動才顯示畫面上的影像,這可能會導致頁面的載入速度不必要地變慢。影像可能會妨礙瀏覽器載入頁面的可見部分。有關此問題的因應措施,您可以先使用 JavaScript 略過載入影像。此外,載入非必要的 JavaScript 也會使 SharePoint 頁面上的載入時間變慢。本主題說明您可以在 SharePoint Online 中使用 JavaScript 改善頁面載入時間的一些方法。

使用 JavaScript 延遲 SharePoint Online 頁面中的影像載入以改善頁面載入時間

您可以使用 JavaScript 防止網頁瀏覽器預先擷取影像。這會加快整體文件轉譯。若要這麼做,請從 <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 網站中使用該主版頁面配置的所有頁面。或者,如果您只要在您網站的一個頁面上使用,請使用指令碼編輯器網頁組件,將 JavaScript 內嵌到頁面中。如需詳細資訊,請參閱下列主題:

範例:從 SharePoint Online    中的主版頁面參考 JavaScript delayLoadImages.js 檔案

為了讓這成為可行的方法,您也必須在主版頁面中參考 jQuery。在下列範例中,您可以看到在初始頁面載入中只載入了一個影像,但頁面上還有幾個影像。

螢幕擷取畫面顯示頁面上載入一個影像

以下螢幕擷取畫面顯示在捲動進入檢視狀態後下載的其餘影像。

螢幕擷取畫面顯示頁面上載入數個影像

使用 JavaScript 延遲影像載入在提升效能方面會是很有效的技巧,不過如果將這項技術應用在公用網站上,則搜尋引擎將無法比照耙梳正常呈現之影像的方式來耙梳影像。這會影響搜尋引擎上的排名,因為影像本身上的中繼資料要等到頁面載入時才會真的在那裡。搜尋引擎編目程式只讀取 HTML,因此不會將影像視為頁面上的內容。影像是用來在搜尋結果中排名頁面的其中一項因素。一種因應措施方式是為影像使用簡介文字。

GitHub 程式碼範例:插入 JavaScript 以改善效能

不要錯過 GitHub 上提供的 JavaScript 插入相關文章和程式碼範例。

請參閱

Office 2013 和 Office 365 專業增強版中的支援瀏覽器

操作方法:在 SharePoint 2013 中將主版頁面套用到網站

操作方法:在 SharePoint 2013 中建立頁面配置

擴展您的技能
探索訓練
優先取得新功能
加入 Office 測試人員

這項資訊有幫助嗎?

感謝您的意見反應!

感謝您的意見反應! 我們將協助您與其中一位 Office 支援專員連絡以深入了解您的意見。

×