Opóźnienie ładowania obrazów i skryptów JavaScript w usłudze SharePoint Online

W tym artykule opisano, jak można skrócić czas ładowania stron usługi SharePoint Online, używając skryptu JavaScript do opóźniania ładowania obrazów, jak również czekając na załadowanie mniej istotnych skryptów JavaScript do momentu załadowania strony.

Obrazy mogą mieć negatywny wpływ na szybkość ładowania stron w usłudze SharePoint Online. Domyślnie większość nowoczesnych przeglądarek internetowych wstępnie pobiera obrazy podczas ładowania strony HTML. Jeśli obrazy nie są widoczne na ekranie, dopóki nie przewiniesz w dół, może to niepotrzebnie spowolnić ładowanie strony. Obrazy mogą zablokować ładowanie widocznej części strony przez przeglądarkę. Ten problem możesz obejść, używając skryptu JavaScript, aby pominąć ładowanie obrazów w pierwszej kolejności. Także ładowanie mniej istotnych skryptów JavaScript może spowolnić czas ładowania stron programu SharePoint. W tym temacie opisano niektóre metody pozwalające skrócić czas ładowania stron przy użyciu skryptu JavaScript w usłudze SharePoint Online.

Skrócenie czasu ładowania stron przez opóźnienie ładowania obrazów na stronach usługi SharePoint Online przy użyciu skryptu JavaScript

Za pomocą skryptu JavaScript możesz uniemożliwić wstępne pobieranie obrazów przez przeglądarkę internetową. Dzięki temu przyspieszysz ogólne renderowanie dokumentów. Aby to zrobić, usuń wartość atrybutu src ze znacznika <img> i zastąp go ścieżką do pliku w atrybucie danych, takim jak data-src. Na przykład:

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

Zastosowanie tej metody powoduje, że przeglądarka nie pobiera obrazów natychmiast. Jeśli obraz jest już w okienku ekranu, skrypt JavaScript nakazuje przeglądarce pobrać adres URL z atrybutu danych i wstawić go jako wartość atrybutu src. Obraz jest ładowany dopiero wtedy, gdy pojawia się w polu widzenia w wyniku przewijania ekranu.

Aby tak się działo, musisz użyć skryptu JavaScript.

W pliku tekstowym zdefiniuj funkcję isElementInViewport()    w celu sprawdzania, czy element znajduje się w tej części przeglądarki, która jest widoczna dla użytkownika.

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) 
  );
}

Następnie użyj funkcji isElementInViewport()    w funkcji loadItemsInView()   . Funkcja loadItemsInView()    powoduje załadowanie wszystkich obrazów, które mają wartość atrybutu data-src, jeśli znajdują się w tej części przeglądarki, która jest widoczna dla użytkownika. Dodaj do pliku tekstowego następującą funkcję:

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"));
          }
      }
  });
}

Na koniec wywołaj funkcję loadItemsInView()    z poziomu funkcji window.onscroll()   , jak pokazano w poniższym przykładzie. Dzięki temu wszystkie obrazy znajdujące się w okienku ekranu są ładowane, gdy użytkownik ich potrzebuje, ale nie wcześniej. Dodaj do pliku tekstowego następującą funkcję:

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

W przypadku usługi SharePoint Online musisz dołączyć poniższą funkcję do zdarzenia przewijania w znaczniku #s4-workspace <div>. Jest to konieczne, ponieważ zdarzenia dotyczące okien są zastępowane, aby wstążka pozostawała dołączona do górnej części strony.

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

Zapisz plik tekstowy jako plik JavaScript z rozszerzeniem js, na przykład delayLoadImages.js.

Po zakończeniu pisania pliku delayLoadImages.js możesz dodać jego zawartość do strony wzorcowej w usłudze SharePoint Online. Robi się to, dodając do nagłówka na stronie wzorcowej link do skryptu. Gdy zawartość pliku zostanie umieszczona na stronie wzorcowej, skrypt JavaScript będzie stosowany do wszystkich stron w witrynie usługi SharePoint Online korzystających z tego układu strony wzorcowej. Jeśli zamierzasz użyć tej zawartości tylko na jednej stronie witryny, osadź skrypt JavaScript na tej stronie za pomocą składnika Web Part edytora skryptów. Aby uzyskać więcej informacji, zobacz poniższe tematy:

Przykład: odwoływanie się do pliku JavaScript delayLoadImages.js ze strony wzorcowej w usłudze SharePoint Online   

Aby to zadziałało, na stronie wzorcowej musisz również odwołać się do biblioteki jQuery. W poniższym przykładzie widać, że w procesie ładowania strony początkowej jest ładowany tylko jeden obraz, chociaż na stronie jest ich o kilka więcej.

Zrzut ekranu przedstawiający jeden obraz załadowany na stronie

Na poniższym zrzucie ekranu pokazano pozostałe obrazy, które są pobierane po przewinięciu do ich widoku.

Zrzut ekranu przedstawiający kilka obrazów załadowanych na stronie

Opóźnienie ładowania obrazów przy użyciu skryptu JavaScript może być skuteczną techniką zwiększania wydajności. Jednak jeśli ta technika jest stosowana w publicznej witrynie internetowej, aparaty wyszukiwania nie mogą przeszukiwać obrazów w taki sam sposób jak obrazów w formie regularnej. Może to wpływać na rankingi w aparatach wyszukiwania, ponieważ do czasu załadowania strony tak naprawdę nie ma metadanych samego obrazu. Przeszukiwarki wyszukiwarek odczytują tylko kod HTML, dlatego nie widzą obrazów jako zawartości na stronie. Obrazy są jednym z czynników używanych do klasyfikowania stron w wynikach wyszukiwania. Jednym ze sposobów obejścia tego problemu jest używanie tekstu wprowadzającego w przypadku obrazów.

Przykładowy kod GitHub: wstawianie skryptu JavaScript w celu zwiększenia wydajności

Pamiętaj, aby zapoznać się z artykułem i przykładowym kodem w sekcji JavaScript injection (Wstawianie skryptu JavaScript) w witrynie GitHub.

Zobacz też

Przeglądarki obsługiwane w pakiecie Office 2013 i usłudze Office 365 ProPlus

Wykonywanie określonych zadań: stosowanie strony wzorcowej do witryny w programie SharePoint 2013

Wykonywanie określonych zadań: tworzenie układu strony w programie SharePoint 2013

Rozwijaj swoje umiejętności
Poznaj szkolenia
Uzyskuj nowe funkcje w pierwszej kolejności
Dołącz do niejawnych testerów pakietu Office

Czy te informacje były pomocne?

Dziękujemy za opinię!

Dziękujemy za opinię! Wygląda na to, że połączenie Cię z jednym z naszych agentów pomocy technicznej pakietu Office może być pomocne.

×