Jaa

Kuvien ja JavaScriptin lataamisen viivyttäminen SharePointissa

  • Artikkeli

Artikkelissa kuvataan, miten voit lyhentää SharePoint-sivujen latausaikaa viivyttämällä kuvien lataamista JavaScriptin avulla ja myös odottamalla, että JavaScript ladataan vasta sivun latautumisen jälkeen.

Kuvat voivat vaikuttaa negatiivisesti sivun latausnopeuksiin SharePointissa. Oletusarvoisesti useimmat nykyaikaiset Internet-selaimet avaavat kuvia HTML-sivua ladattaessa. Tämä prosessi voi hidastaa sivun lataamista, jos kuvat eivät näy näytössä, ennen kuin käyttäjä vieritä alaspäin. Kuvat voivat estää selainta lataamasta sivun näkyvää osaa. Voit kiertää tämän ongelman ohittamalla kuvien lataamisen ensin JavaScriptin avulla. Lisäksi javaScriptin lataaminen voi hidastaa latausaikoja myös SharePoint-sivuillasi. Tässä artikkelissa kuvataan joitakin menetelmiä, joiden avulla voit parantaa sivun latausaikoja SharePointin JavaScriptin avulla.

Sivun latausaikojen parantaminen viivyttämällä kuvien lataamista SharePoint-sivuilla JavaScriptin avulla

JavaScriptin avulla voit estää selainta tarttumasta kuviin etukäteen. Tämä tekniikka nopeuttaa tiedoston yleistä hahmontamista. Tätä varten poistat src-määritteen arvon img-tunnisteesta <> ja korvaat sen tiedoston polulla tietomääritteessä, kuten: data-src. Esimerkki:

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

Tässä menetelmässä selain ei lataa kuvia heti. Jos kuva on jo viewportissa, JavaScript kehottaa selainta noutamaan URL-osoitteen tietomääritteestä ja lisäämään sen src-määritteen arvona. Kuva latautuu vain, kun käyttäjä vierittää ja se tulee näkyviin.

Jotta voit suorittaa tämän funktion, sinun on käytettävä JavaScriptia.

Määritä tekstitiedostossa isElementInViewport() -funktio, joka tarkistaa, onko elementti selaimen osassa, joka näkyy käyttäjälle.

function isElementInViewport(el) {
  if (!el)
    return false;
  var rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &amp;&amp;
    rect.left >= 0 &amp;&amp;
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

Käytä seuraavaksi isElementInViewport() -kohdetta loadItemsInView()- funktiossa. loadItemsInView()-funktio lataa kaikki kuvat, joilla on arvo data-src-määritteelle, jos ne ovat käyttäjälle näkyvässä selaimen osassa. Lisää tekstitiedostoon seuraava funktio:

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

Kutsu lopuksi loadItemsInView()kohteesta window.onscroll() seuraavassa esimerkissä esitetyllä tavalla. Tämä funktio varmistaa, että kaikki näyttöportissa olevat kuvat ladataan sellaisina kuin käyttäjä niitä tarvitsee, mutta ei ennen. Lisää tekstitiedostoon seuraava:

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

SharePointissa sinun on liitettävä seuraava funktio vieritystapahtumaan #s4 työtilan <jako> -tunnisteessa, koska ikkunan tapahtumat ohitetaan, jotta valintanauha pysyy kiinnitettynä sivun yläreunaan.

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

Tallenna tekstitiedosto JavaScript-tiedostona tunnisteella .js, esimerkiksi delayLoadImages.js.

Kun olet kirjoittanut delayLoadImages.js, voit lisätä tiedoston sisällön SharePointin perustyylisivuun lisäämällä perustyylisivun ylätunnisteeseen komentosarjalinkin. Kun JavaScript on perustyylisivulla, sitä käytetään kaikilla SharePoint-sivuston sivuilla, jotka käyttävät tätä perustyylisivun asettelua. Vaihtoehtoisesti, jos aiot käyttää toimintoja vain yhdellä sivuston sivulla, upota JavaScript sivulle komentosarjaeditorin WWW-osan avulla. Lisätietoja on seuraavissa artikkeleissa:

Esimerkki: JavaScript-delayLoadImages.js-tiedostoon viittaaminen SharePointin perustyylisivulta

Jotta tämä esimerkki toimisi, sinun on myös viitattava jQuery-kyselyihin perustyylisivulla. Seuraavassa esimerkissä näet ensimmäisessä sivun lataamisessa, että vain yksi kuva ladataan, mutta sivulla on useita muita.

Näyttökuva, joka näyttää yhden sivulle ladatun kuvan.

Seuraavassa näyttökuvassa näkyvät muut kuvat, jotka on ladattu niiden vierittämisen jälkeen.

Näyttökuva, jossa näkyy useita sivulle ladattuja kuvia.

Kuvien lataamisen viivyttäminen JavaScriptin avulla voi olla tehokas tapa parantaa suorituskykyä. Jos tekniikkaa kuitenkin käytetään julkisella verkkosivustolla, hakukoneet eivät voi indeksoida kuvia samalla tavalla kuin säännöllisesti muodostettu kuva. Tämä tekniikka voi vaikuttaa hakukoneiden sijoituksiin, koska itse kuvan metatietoja ei ole olemassa, ennen kuin sivu latautuu. Haku moduulin indeksointiohjelmat lukevat vain HTML:n, joten kuvat eivät näy sivulla sisältöinä. Kuvat ovat yksi tekijöistä, joita käytetään sivujen luokitteluun hakutuloksissa. Kiertotapa on käyttää kuvien esittelytekstiä.

GitHub-koodiesimerkki: JavaScriptin injektointi suorituskyvyn parantamiseksi

Älä missaa GitHubissa annettua Artikkeli- ja koodimallia JavaScript-ruiskeesta .

Tutustu myös seuraaviin ohjeartikkeleihin:

Office 2013:n ja Microsoft 365 -sovellukset suuryrityksille tuetut selaimet

Ohjeet: Perustyylisivun käyttäminen sivustossa SharePoint 2013:ssa

Ohjeet: sivun asettelun Create SharePoint 2013:ssa