Zpoždění načítání obrázků a JavaScriptu v SharePointu Online
Tento článek popisuje, jak můžete zkrátit dobu načítání stránek SharePointu Online pomocí JavaScriptu ke zpoždění načítání obrázků a také čekáním na načtení jiného než nezbytného JavaScriptu, dokud se stránka nenačte.
Obrázky můžou negativně ovlivnit rychlost načítání stránek v SharePointu Online. Ve výchozím nastavení většina moderních internetových prohlížečů předem načítá obrázky při načítání stránky HTML. To může způsobit zbytečně pomalé načítání stránky, pokud obrázky nejsou viditelné na obrazovce, dokud se uživatel neposouvá dolů. Obrázky můžou prohlížeči zablokovat načtení viditelné části stránky. Chcete-li tento problém vyřešit, můžete nejprve přeskočit načítání obrázků pomocí JavaScriptu. Načítání jiného javascriptu, které není nezbytné, může také zpomalit dobu stahování na sharepointových stránkách. Toto téma popisuje některé metody, které můžete použít ke zlepšení doby načítání stránek pomocí JavaScriptu v SharePointu Online.
Zkrácení doby načítání stránek zpožděním načítání obrázků na stránkách SharePointu Online pomocí JavaScriptu
Pomocí JavaScriptu můžete zabránit webovému prohlížeči v předběžném načítání obrázků. Tím se zrychlí celkové vykreslování dokumentu. Chcete-li to provést, odeberete hodnotu atributu src ze <značky img> a nahradíte ji cestou k souboru v datovém atributu, například: data-src. Příklad:
<img src="" data-src="/sites/NavigationBySearch/_catalogs/masterpage/media/microsoft-white-8.jpg" />
Při použití této metody prohlížeč nestahuje obrázky okamžitě. Pokud je obrázek již v oblasti zobrazení, JavaScript řekne prohlížeči, aby načetl adresu URL z atributu data a vložil ji jako hodnotu atributu src. Obrázek se načte, jenom když se uživatel posune a zobrazí se.
Aby se to všechno stalo, budete muset použít JavaScript.
V textovém souboru definujte funkci isElementInViewport() a zkontrolujte, jestli je prvek v části prohlížeče, která je viditelná pro uživatele.
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)
);
}
Dále ve funkci loadItemsInView() použijte isElementInViewport(). Funkce loadItemsInView() načte všechny obrázky, které mají hodnotu atributu data-src, pokud jsou v části prohlížeče, která je viditelná pro uživatele. 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 loadItemsInView() z souboru window.onscroll(), jak je znázorněno v následujícím příkladu. Tím se zajistí, že se všechny obrázky, které jsou v oblasti zobrazení, načtou tak, jak je uživatel potřebuje, ale ne dříve. Do textového souboru přidejte následující:
//Example of calling loadItemsInView() from within window.onscroll()
$(window).on("scroll", function () {
loadItemsInView();
});
U SharePointu Online je potřeba připojit následující funkci k události scroll ve značce div> #s4-workspace<. Důvodem je to, že události okna jsou přepsány, aby se zajistilo, že pás karet zůstane připojený k horní části stránky.
//Keep the ribbon at the top of the page
$('#s4-workspace').on("scroll", function () {
loadItemsInView();
});
Uložte textový soubor jako javascriptový soubor s příponou .js, například delayLoadImages.js.
Po dokončení psaní delayLoadImages.js můžete obsah souboru přidat na stránku předlohy v SharePointu Online. Uděláte to tak, že do záhlaví na stránce předlohy přidáte odkaz na skript. Jakmile je na stránce předlohy, použije se JavaScript na všechny stránky na webu SharePointu Online, které používají toto rozložení stránky předlohy. Pokud chcete použít tento kód pouze na jedné stránce webu, použijte k vložení JavaScriptu na stránku webovou část editoru skriptů. Další informace najdete v těchto tématech:
Příklad: Odkazování na soubor javascriptového delayLoadImages.js ze stránky předlohy v SharePointu Online
Aby to fungovalo, musíte také odkazovat na jQuery na stránce předlohy. V následujícím příkladu vidíte při počátečním načtení stránky, že se načetl jenom jeden obrázek, ale na stránce jich je několik dalších.
Následující snímek obrazovky ukazuje zbytek obrázků, které se stáhnou po jejich posunutí do zobrazení.
Zpoždění načítání obrázků pomocí JavaScriptu může být efektivní technikou zvýšení výkonu. Pokud se však tato technika použije na veřejném webu, pak vyhledávací weby nebudou moct procházet obrázky stejným způsobem, jakým by procházely pravidelně formovaný obrázek. To může mít vliv na hodnocení na vyhledávacích webech, protože metadata na samotném obrázku ve skutečnosti neexistují, dokud se stránka nenačte. Prohledávací moduly vyhledávacích modulů čtou jenom kód HTML, a proto obrázky neuvidí jako obsah na stránce. Obrázky jsou jedním z faktorů, které se používají k řazení stránek ve výsledcích hledání. Jedním ze způsobů, jak to obejít, je použít pro obrázky úvodní text.
Ukázka kódu GitHubu: Vložení JavaScriptu za účelem zlepšení výkonu
Nenechte si ujít článek a ukázku kódu týkající se injektáže JavaScriptu na GitHubu.
Viz také
Podporované prohlížeče v Office 2013 a Microsoft 365 Apps pro velké organizace