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

Ez a cikk ismerteti, hogyan csökkentheti a SharePoint Online-oldalak betöltési idejét azáltal, hogy egyrészt a JavaScript használatával késlelteti a képek betöltését, másrészt később tölt be nélkülözhető JavaScripteket.

A képek lassíthatják a SharePoint Online-oldalak betöltését. Alapértelmezés szerint a legtöbb modern webböngésző előtölti a képeket HTML-oldalak betöltésekor. Emiatt az oldal betöltési sebessége szükségtelenül lecsökken, ha a képek nem jelennek meg a továbbgörgetésig. A képek akadályozhatják a böngészőt az oldal látható részének a betöltésében. A problémát megoldhatja JavaScript használatával, amellyel késleltethető a képek betöltése. A SharePoint-oldalak betöltési sebességét továbbá a nélkülözhető JavaScriptek betöltése is lassíthatja. Ez a témakör azokat a módszereket ismerteti, amelyek JavaScriptet használnak a SharePoint Online-oldalak betöltési sebességének növelésére.

SharePoint Online-oldalak betöltési sebességének növelése a képek betöltésének csökkentésével a JavaScript használatával

A JavaScript-tel megakadályozható, hogy a böngésző előtöltse a képeket. Ez gyorsítja a dokumentum megjelenítését. Ehhez törölje az src attribútum értékét az <img> címkéből, és helyettesítse egy adatattribútumban lévő fájl elérési útjával, például így: data-src. Például:

<img src=”” data-src=”/sites/NavigationBySearch/_catalogs/masterpage/Images/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 a látható részben van, a JavaScript arra utasítja a böngészőt, hogy az adatattribútumból kérje le az URL-címet, és illessze be az src attribútum értékeként. Így a kép csak akkor lesz betöltve, amikor láthatóvá válik a görgetés során.

Mindehhez JavaScript szükséges.

Egy szöveges fájlban definiálja az isElementInViewport()    függvényt, amellyel megállapítható, hogy az adott elem a böngészőnek a felhasználó által 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) &&
    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 minden olyan képet betölt, amely értékkel rendelkezik a data-src attribútumban, és amely a böngészőnek a felhasználó által látható részén található. Adja meg a következő függvényt a szöveges fájlban:

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 be a loadItemsInView()    függvényt a window.onscroll()    függvényen belül az alábbi példa alapján. Ezzel biztosíthatja, hogy a látható részben lévő képek csak akkor töltődjenek be, amikor a felhasználónak szüksége van rájuk. Adja meg a következőt a szöveges fájlban:

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

A SharePoint Online esetében az alábbi függvényt kell csatolni a görgetési eseményhez a #s4-workspace <div> címkén. Ennek az az oka, hogy az ablakesemények felül vannak bírálva annak érdekében, hogy a szalag az oldal tetején legyen rögzítve.

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

A szöveges fájlt .js kiterjesztésű JavaScript-fájlként mentse, például delayLoadImages.js néven.

Amikor befejezte a delayLoadImages.js szerkesztését, annak tartalmát hozzáadhatja egy mesteroldalhoz a SharePoint Online-ban. Ehhez adjon hozzá egy parancsfájl-hivatkozást a mesteroldal fejlécéhez. Miután bekerült a mesteroldalra, a JavaScript minden olyan SharePoint Online-oldalon alkalmazva lesz, amely az adott mesteroldal elrendezését használja. Ugyanakkor ha ezt kizárólag a webhely egyetlen oldalán szeretné használni, a parancsfájl-szerkesztő kijelzővel ágyazza be a JavaScriptet az oldalba. A következő témakörök további információkkal szolgálnak:

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

Ehhez a jQuery-re is hivatkozni kell a mesteroldalon. Ebben a példában láthatja, hogy bár az oldalon több kép is szerepel, kezdetben csak egyetlen kép van betöltve.

Egy betöltött képet tartalmazó weboldal képernyőképe

Az alábbi képernyőfelvételen a többi kép látható, amelyek csak akkor töltődnek be, amikor a görgetés során láthatóvá válnak.

Több betöltött képet tartalmazó weboldal képernyőképe

A képek JavaScripttel történő késleltetett betöltése hatékony módszer lehet a teljesítmény növelésére, de ha nyilvános webhelyen alkalmazzák, a keresőmotorok nem tudják úgy bejárni a képeket, mint a szokásos módon létrehozottakat. Ez befolyásolhatja a keresőmotorok találati sorrendjét, hiszen a képek metaadatai valójában nem hozzáférhetők, amíg a kép be nem töltődik. A keresőmotorok bejárási funkciója csak a HTML-eket olvassa, így a képeket nem érzékeli tartalomként az oldalon. A képek márpedig fontos tényezők a keresési találati lista sorrendjének meghatározásakor. Ezt a problémát úgy hidalhatja át, hogy bevezető szövegeket ad a képekhez.

GitHub mintakód: JavaScript bejegyzése a teljesítmény növelésére

Ne feledje a GitHubon található cikket és mintakódot a JavaScript-bejegyzésről.

Lásd még

Az Office 2013-ban és az Office 365 ProPlus-ban támogatott böngészők

Útmutató: Mesteroldal alkalmazása egy SharePoint 2013-oldalon

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

Office-jártasság bővítése
Oktatóanyagok megismerése
Új szolgáltatások listájának lekérése
Részvétel az Office Insider programban

Hasznos volt az információ?

Köszönjük a visszajelzését!

Köszönjük visszajelzését. Jobbnak látjuk, ha az Office egyik támogatási szakemberéhez irányítjuk.

×