Képek és JavaScript betöltésének késleltetése a SharePoint Online-ban

Ez a cikk azt ismerteti, hogyan csökkentheti a SharePoint Online-lapok betöltési idejét a JavaScript használatával a képek betöltésének késleltetésére, valamint a nem alapvető JavaScript betöltésére való várakozással a lap betöltéséig.

A képek negatív hatással lehetnek a lapbetöltés sebességére a SharePoint Online-ban. Alapértelmezés szerint a legtöbb modern internetböngésző előre beolvassa a képeket a HTML-oldal betöltésekor. Emiatt előfordulhat, hogy a lap betöltése szükségtelenül lassú, ha a képek nem láthatók a képernyőn, amíg a felhasználó le nem görget. A képek megakadályozhatják, hogy a böngésző betöltse a lap látható részét. A probléma kerülő megoldásához a JavaScript használatával kihagyhatja a képek betöltését. Emellett a nem alapvető JavaScript betöltése lelassíthatja a SharePoint-lapok letöltési idejét is. Ez a témakör néhány módszert ismertet, amelyekkel javíthatja a lapbetöltési időket a SharePoint Online-ban a JavaScript használatával.

A lapbetöltési idők javítása a Képbetöltés késleltetésével a SharePoint Online-lapokon JavaScript használatával

A JavaScript használatával megakadályozhatja, hogy egy webböngésző előre beolvassa a képeket. Ez felgyorsítja a dokumentumok általános renderelését. Ehhez távolítsa el az src attribútum értékét az <img> címkéből, és cserélje le egy adatattribútumban lévő fájl elérési útjára, például: data-src. Például:

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

Ezzel a módszerrel a böngésző nem tölti le azonnal a képeket. Ha a kép már szerepel a nézetablakban, a JavaScript arra utasítja a böngészőt, hogy kérje le az URL-címet az adatattribútumból, és szúrja be az src attribútum értékeként. A kép csak akkor töltődik be, amikor a felhasználó görget, és megjelenik.

Ahhoz, hogy mindez megtörténjen, JavaScriptet kell használnia.

Egy szövegfájlban adja meg az isElementInViewport() függvényt annak ellenőrzéséhez, hogy egy elem a böngészőnek a felhasználó számára látható részén található-e.

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) &amp;&amp;
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

Ezután használja az isElementInViewport() függvényt a loadItemsInView() függvényben. A loadItemsInView() függvény betölti az összes olyan képet, amely rendelkezik a data-src attribútum értékével, ha azok a böngésző azon részén találhatók, amely látható a felhasználó számára. Adja hozzá a következő függvényt a szövegfájlhoz:

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

Végül hívja meg a loadItemsInView() parancsot a window.onscroll() fájlból az alábbi példában látható módon. Ez biztosítja, hogy a nézetablakban lévő képek úgy legyenek betöltve, ahogy a felhasználónak szüksége van rájuk, de korábban nem. Adja hozzá a következőt a szövegfájlhoz:

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

SharePoint Online esetén a következő függvényt kell csatolnia a #s4-workspace <div> címke görgetési eseményéhez. Ennek az az oka, hogy az ablakesemények felül vannak bírálva, hogy a menüszalag a lap tetejére legyen csatolva.

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

Mentse a szövegfájlt JavaScript-fájlként .js kiterjesztéssel, például delayLoadImages.js.

Ha befejezte a delayLoadImages.js írását, hozzáadhatja a fájl tartalmát egy mesterlaphoz a SharePoint Online-ban. Ehhez adjon hozzá egy szkripthivatkozást a mesteroldal fejlécéhez. Ha a mesterlapon van, a JavaScript a SharePoint Online-webhely minden olyan lapjára érvényes lesz, amely ezt a mesterlapelrendezést használja. Másik lehetőségként, ha ezt csak a webhely egy oldalán szeretné használni, a szkriptszerkesztő kijelzővel ágyazza be a JavaScriptet a lapba. További információért tekintse meg ezeket a témaköröket:

• Útmutató: Mesterlap alkalmazása webhelyre a SharePoint 2013-ban

• Útmutató: Lapelrendezés létrehozása a SharePoint 2013-ban

Példa: Hivatkozás a JavaScript-delayLoadImages.js fájlra egy mesterlapról a SharePoint Online-ban

Ahhoz, hogy ez működjön, a jQueryre is hivatkoznia kell a mesteroldalon. Az alábbi példában a kezdeti oldalbetöltés során láthatja, hogy csak egy kép van betöltve, de több is van az oldalon.

Az alábbi képernyőképen a megtekintésre görgetés után letöltött többi kép látható.

A képbetöltés JavaScript használatával történő késleltetése hatékony módszer lehet a teljesítmény növeléséhez; Ha azonban a technikát egy nyilvános webhelyen alkalmazzák, akkor a keresőmotorok nem tudják ugyanúgy bejárni a képeket, mint egy rendszeresen formázott képet. Ez hatással lehet a keresőmotorok rangsorolására, mert maga a kép metaadatai nem igazán vannak ott, amíg az oldal be nem töltődik. A keresőmotorok webbejárói csak a HTML-t olvassák, ezért a képek nem láthatók tartalomként az oldalon. A képek a keresési eredmények lapjainak rangsorolásához használt tényezők közé tartoznak. Ezt úgy kerülheti meg, ha bevezető szöveget használ a képekhez.

GitHub-kódminta: JavaScript beszúrása a teljesítmény javítása érdekében

Ne hagyja ki a GitHubon elérhető JavaScript-injektálásról szóló cikket és kódmintát.

Lásd még

Támogatott böngészők az Office 2013-ban és Nagyvállalati Microsoft 365-alkalmazások

Útmutató: Mesterlap alkalmazása webhelyre a SharePoint 2013-ban

Útmutató: Lapelrendezés létrehozása a SharePoint 2013-ban