Oneskorenie načítania obrázkov a jazyka JavaScript v SharePointe Online

Tento článok opisuje spôsob, akým môžete skrátiť čas načítania stránok v službe SharePoint Online s použitím skriptu JavaScript, pomocou ktorého môžete odložiť načítanie obrázkov na neskôr, ako aj tým, že odložíte načítanie nepodstatných prvkov skriptu JavaScript do chvíle, kým sa stránka nenačíta.

Obrázky môžu negatívne ovplyvniť rýchlosť načítavania stránky v službe SharePoint Online. Väčšina moderných internetových prehliadačov pri načítavaní stránky HTML štandardne vopred vyvolá obrázky. Ak sa obrázky na stránke ešte nezobrazujú, proces načítania stránky sa môže spomaliť, zatiaľ čo sa používateľ na stránke posúva nadol. Obrázky môžu zablokovať prehliadač, ktorý nedokáže načítať viditeľnú časť stránky. Ak chcete tento problém vyriešiť, môžete použiť JavaScript a úvodné načítavanie obrázkov preskočiť. Načítavanie nepodstatných prvkov skriptu JavaScript môže okrem toho spomaliť aj časy načítania na vašich stránkach lokality SharePoint. Táto téma opisuje niekoľko spôsobov, ktorými môžete zlepšiť časy načítania stránky použitím skriptu JavaScript v službe SharePoint Online.

Zlepšenie časov načítania stránky odložením načítania obrázkov v službe SharePoint Online pomocou skriptu JavaScript

JavaScript môžete použiť na to, aby ste webovému prehliadaču zabránili zobrazovať obrázky. Zrýchli sa tým celkové vykresľovanie dokumentov. Na to je potrebné, aby ste zo značky <img> odstránili atribút src a nahradili ho cestou k súboru v dátovom atribúte, napr. data-src. Príklad:

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

Použitím tohto postupu prehliadač nestiahne obrázky okamžite. Ak sa už obrázok nachádza v zobrazení, JavaScript prehliadaču prikáže, aby načítal adresu URL z dátového atribútu a vložil ju ako hodnotu pre atribút src. Obrázok sa načíta len vtedy, keď sa naň používateľ pri posúvaní stránky presunie.

Na to všetko budete potrebovať JavaScript.

V textovom súbore zadefinujte metódu isElementInViewport()   ,ktorá overí, či sa prvok nachádza v tej časti prehliadača, ktorú si momentálne používateľ zobrazil.

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

Potom použite metódu isElementInViewport()    vo funkcii loadItemsInView()   . Funkcia LoadItemsInView()    načíta všetky obrázky, ktoré obsahujú hodnotu pre atribút data-src, ak sa nachádzajú v tej časti prehliadača, ktorá sa aktuálne zobrazuje používateľovi. Do textového súboru pridajte nasledujúcu funkciu:

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

Nakoniec zavolajte funkciu loadItemsInView()    v udalosti window.onscroll()   , ako je znázornené v nasledujúcom príklade. Tým sa zabezpečí, že obrázky, ktoré sa nachádzajú v zobrazenej časti, sa načítajú vtedy, keď ich používateľ potrebuje, a nie skôr. Do textového súboru pridajte nasledujúcu funkciu:

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

Pre SharePoint Online je potrebné, aby ste do udalosti prezerania na značke #s4-workspace <div> pridali nasledujúcu funkciu. Udalosti okna sa totiž prepíšu, aby sa zabezpečilo, že pás s nástrojmi ostane v hornej časti stránky.

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

Uložte textový súbor ako súbor JavaScript s príponou .js, napríklad delayLoadImages.js.

Po skončení zapisovania súboru delayLoadImages.js môžete obsah súboru pridať do predlohy v službe SharePoint Online. Môžete to urobiť pridaním skriptu do hlavičky v predlohe. Po pridaní do predlohy sa JavaScript použije na všetky stránky vo vašej lokalite SharePoint Online, ktoré používajú toto rozloženie predlohy. Ak tento postup chcete uplatniť len na jednej stránke vo svojej lokalite, môžete použiť editor skriptov Web Part, pomocou ktorého vložíte na stránku JavaScript. Ďalšie informácie nájdete v týchto témach:

Príklad: Odkazovanie na súbor delayLoadImages.js JavaScript z predlohy v službe SharePoint Online   

Ak chcete, aby toto riešenie bolo funkčné, musíte v predlohe odkazovať na jQuery. V nasledujúcom príklade je na úvodnom zaťažení stránky znázornené, že sa síce načítal len jeden obrázok, avšak na stránke sa nachádzajú ešte ďalšie obrázky.

Obrázok novej úlohy v sieťovom diagrame.

Na nasledujúcej snímke obrazovky sú zobrazené zvyšné obrázky, ktoré sa stiahnu v momente, keď sa používateľ na stránke na ne presunie.

Snímka obrazovky s niekoľkými obrázkami načítanými na stránke

Posunutie času načítania obrázkov pomocou skriptu JavaScript môže byť účinnou metódou na zvýšenie výkonu. Ak sa však táto metóda používa na verejnej webovej lokalite, vyhľadávacie nástroje nedokážu prehľadať obrázky rovnakým spôsobom ako v prípade bežne naformátovaného obrázka. To môže ovplyvniť hodnotenia vyhľadávacích nástrojov, pretože metaúdaje na obrázku v skutočnosti nebudú k dispozícii dovtedy, kým sa stránka nenačíta. Moduly vyhľadávacích nástrojov na prehľadávanie obsahu načítavajú iba HTML, a preto obrázky nezaznamenajú ako obsah na stránke. Obrázky sú jedným z faktorov, ktoré sa používajú na hodnotenie stránok vo výsledkoch vyhľadávania. Jedným z možných riešení je použiť úvodný text pre obrázky.

Ukážka kódu GitHub: pridanie JavaScript na vylepšenie výkonu

Nenechajte si ujsť článok a vzorový kód na pridanie prvku skriptu JavaScript, ktorý je k dispozícii na lokalite GitHub.

Pozrite tiež

Podporované prehliadače v balíku Office 2013 a službách Office 365 ProPlus

Postup: Použitie predlohy na lokalite v SharePointe 2013

Postup: Vytvorenie rozloženia stránky v SharePointe 2013

Rozšírte svoje zručnosti
Preskúmať školenie
Buďte medzi prvými, ktorí získajú nové funkcie
Pridajte sa k insiderom pre Office

Boli tieto informácie užitočné?

Ďakujeme za vaše pripomienky!

Ďakujeme vám za pripomienky. Pravdepodobne vám pomôže, ak vás spojíme s pracovníkom podpory pre Office.

×