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

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 leküldi a képeket a HTML-lapok betöltésekor. Ez a folyamat lelassíthatja a lap betöltését, 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 lényeges JavaScript betöltése lelassíthatja a SharePoint-lapok letöltési idejét is. Ez a cikk néhány módszert ismertet, amelyekkel javítható a lapbetöltési idő JavaScripttel a SharePoint Online-ban.

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 betöltse a képeket. Ez a technika 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" />

Ebben a módszerben 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.

A függvény végrehajtásához 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 a függvény 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ímkén lévő görgetési eseményhez, mert az ablakesemények felül vannak bírálva, hogy a menüszalag a lap tetejére maradjon 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.

Miután befejezte a delayLoadImages.js írását, hozzáadhatja a fájl tartalmát egy mesterlaphoz a SharePoint Online-ban, ha hozzáad egy parancsfájlhivatkozást a mesterlap fejlécéhez. Ha már 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 csak a webhely egyik oldalán szeretné használni a funkciót, a szkriptszerkesztő kijelzővel ágyazza be a JavaScriptet a lapba. További információ:

• Ú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 a példa 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 nézetbe 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 a technika befolyásolhatja a keresőmotorok rangsorolását, mert maga a kép metaadatai nem találhatók meg, amíg az oldal be nem töltődik. Keresés motorbejárók csak a HTML-t olvassák, ezért nem látják a képeket tartalomként az oldalon. A képek a keresési eredmények lapjainak rangsorolásához használt tényezők közé tartoznak. Megkerülő megoldásként bevezető szöveget kell használnia 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