Zpožděné načítání snímků a JavaScriptu v SharePointu Online

Tento článek popisuje, jak použít JavaScript ke zpoždění načítání obrázků a jak oddálit načtení méně důležitého kódu JavaScript, aby se zkrátila doba načítání stránek služby SharePoint Online.

Obrázky mohou negativně ovlivňovat rychlost načítání stránek SharePointu Online. Většina moderních internetových prohlížečů při načtení stránky HTML automaticky načítá obrázky předem. Načtení stránky tak může být zbytečně pomalé, pokud obrázky nejsou na obrazovce vidět, dokud se uživatel neposune dolů. Obrázky mohou prohlížeči bránit v načtení viditelné části stránky. Tento problém můžete obejít tak, že JavaScriptem přeskočíte počáteční načítání obrázků. Rychlost načtení sharepointových stránek také může zpomalovat JavaScript, který není nezbytný. Toto téma popisuje několik způsobů, jak použít JavaScript k rychlejšímu načítání stránek SharePointu Online.

Použití JavaScriptu k rychlejšímu načítání stránek tím, že u stránek SharePointu Online oddálíte načtení obrázků

Pomocí JavaScriptu můžete webovému prohlížeči zabránit, aby obrázky načítal předem. Tím se celkově zrychlí vykreslování dokumentu. Uděláte to tak, že z tagu <img> odeberete hodnotu atributu src a nahradíte ji v atributu dat cestou k souboru, třeba data-src. Příklad:

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

Při tomto způsobu prohlížeč hned nenačítá obrázky. Pokud je obrázek v oblasti zobrazení, JavaScript řekne prohlížeči, aby načetl adresu URL z atributu dat a vložil ji jako hodnotu do atributu src. Obrázek se načte, teprve když uživatel posune zobrazení tak, že je vidět.

Aby toto všechno proběhlo, bude potřeba použít JavaScript.

V textovém souboru definujte funkci isElementInViewport()   , abyste zjistili, jestli je prvek v té části prohlížeče, kterou uživatel vidí.

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

Pak použijte funkci isElementInViewport()    ve funkci loadItemsInView()   . Funkce loadItemsInView()    načte všechny obrázky, které mají hodnotu atributu data-src a jsou v té části prohlížeče, kterou uživatel vidí. Do textového souboru přidejte následující funkci:

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

Nakonec zavolejte funkci loadItemsInView()    z funkce window.onscroll()   . Podívejte se na následující příklad. Tím zajistíte, že se všechny obrázky v zobrazení načtou, až je bude uživatel potřebovat (ale ne dříve). Do textového souboru přidejte tento kód:

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

Pro SharePoint Online potřebujete u tagu #s4-workspace <div> k události posunutí připojit následující funkci. Je to proto, že se události okna přepíší, aby pás karet zůstal připojený k hornímu okraji stránky.

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

Textový soubor uložte jako javascriptový soubor s příponou .js, například delayLoadImages.js.

Jakmile dokončíte soubor delayLoadImages.js, můžete jeho obsah přidat na stránku předlohy v SharePointu Online. Uděláte to tak, že do záhlaví stránky předlohy přidáte odkaz na skript. Jakmile je obsah souboru na stránce předlohy, použije se JavaScript u všech stránek vašeho webu SharePointu Online, které toto rozložení stránky předlohy používají. Pokud chcete skript použít jen na jedné stránce webu, použijte k vložení JavaScriptu na stránku webovou část Editor skriptů. Další informace najdete v těchto tématech:

Příklad: Vytvoření odkazu na javascriptový soubor delayLoadImages.js ze stránky předlohy v SharePointu Online   

Aby všechno fungovalo, musíte na stránce předlohy vytvořit také odkaz na jQuery. V následujícím příkladu vidíte, jak při počátečním načtení stránky načíst jenom jeden obrázek, i když jich je na stránce více.

Snímek obrazovky s jedním načteným obrázkem na stránce

Následující snímek obrazovky ukazuje zbývající obrázky, které se stáhnou, až se posunou do zobrazení.

Snímek obrazovky s několika načtenými obrázky na stránce

Zpoždění načtení obrázku pomocí JavaScriptu je účinnou technikou, jak zvýšit výkon. Pokud tuto techniku použijete u veřejného webu, nedokážou vyhledávací weby procházet obrázky stejně, jako by procházely normálně formátované obrázky. To může mít vliv na pořadí výsledků vyhledávacího webu, protože metadata obrázku ve skutečnosti nejsou přítomna, dokud se stránka nenačte. Prohledávací moduly používané u vyhledávacích webů čtou jen HTML, a proto na stránce nevidí obrázky jako obsah. Obrázky jsou jedním z činitelů používaných k určení pořadí stránek ve výsledcích hledání. Je možné to obejít tím, že u obrázků použijete úvodní text.

Příklad kódu pro GitHub: Vložení JavaScriptu pro lepší výkon

Nezapomeňte si přečíst článek a ukázku kódu k vložení JavaScriptu na GitHubu.

Viz taky

Podporované prohlížeče v Office 2013 a Office 365 ProPlus

Postup: Použití stránky předlohy na webu SharePointu 2013

Postup: Vytvoření rozložení stránky v SharePointu 2013

Rozšiřte své znalosti a dovednosti
Projít školení
Získejte nové funkce jako první
Připojte se k účastníkům programu Office Insiders

Byly tyto informace užitečné?

Děkujeme vám za zpětnou vazbu.

Děkujeme vám za váš názor. Vypadá to, že bude užitečné, když vás spojíme s některým z našich agentů z podpory Office.

×