Office
Kirjaudu sisään

Kuvien lataamisen ja JavaScriptin viive SharePoint Onlinessa

Tässä artikkelissa kerrotaan, miten voit vähentää SharePoint Online -sivujen latausaikaa käyttämällä JavaScript -sovellusta kuvien latauksen viivyttämiseen ja lykkäämällä vähemmän oleellisen JavaScript -materiaalin lataamisen siihen, että sivu on muilta osin latautunut.

Kuvat voivat vaikuttaa kielteisesti SharePoint Online -sivujen latausnopeuteen. Oletusarvoisesti useimmat nykyaikaiset Internet-selaimet noutavat kuvat etukäteen ladatessaan HTML-sivuja. Tämä voi tarpeettomasti hidastaa sivun latautumista, jos kuvat eivät näy näytössä ennen kuin käyttäjä vierittää näyttöä alaspäin. Kuvat voivat estää selainta lataamasta sivun näkyvää osaa. Voit kiertää tämän ongelman käyttämällä JavaScript -sovellusta ohittamaan aluksi kuvien lataamisen. Myös vähemmän oleellisen JavaScript -materiaalin käyttäminen voi hidastaa SharePoint-sivujesi latausaikoja. Tässä ohjeaiheessa käsitellään eräitä menetelmiä, joiden avulla JavaScript voi parantaa SharePoint Online -sivujesi latautumisvauhtia.

Sivun latautumisvauhdin parantaminen viivyttämällä SharePoint Online -sivujen kuvien latautumista käyttämällä JavaScript -sovellusta

Voit käyttää JavaScript -sovellusta estämään verkkoselainta hakemasta kuvia etukäteen. Tämä nopeuttaa asiakirjan hahmontamista kokonaisuutea. Tämän teet poistamalla src-määritteen arvon <img>-tunnisteesta ja korvaamalla sen tiedoston hakupolulla data-määritteessä, kuten data-src. Esimerkki:

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

Tätä menetelmää käytettäessä selain ei lataa kuvia välittömästi. Jos kuva on jo näyttöikkunassa, JavaScript käskee selainta hakemaan URL-osoitteen data-määritteestä ja sijoittamaan sen arvoksi src-määritteeseen. Kuva latautuu vasta sitä mukaa kun käyttäjä vierittää näyttöä ja se tulee näkymään.

Kaikki tämä tapahtuu kun käytät JavaScript -sovellusta.

Määrittele tekstitiedostossa isElementInViewport()   -toiminto tarkistamaan, onko elementti käyttäjälle näkyvässä selaimen osassa.

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

Käytä seuraavaksi isElementInViewport()   ia loadItemsInView()   -funktiossa. loadItemsInView()   -funktio lataa kaikki kuvat, joilla on data-src -määritearvo, jos ne ovat siinä osassa selainta, joka näkyy käyttäjälle. Lisää seuraava funktio tekstitiedostoon:

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

Seuraa sitten loadItemsInView()   -funktiota window.onscroll()   in sisältä, kuten seuraava esimerkki osoittaa. Näin varmistetaan, että kaikki näyttöikkunassa olevat kuvat ladataan sitä mukaa kun käyttäjä tarvitsee niitä, mutta ei aikaisemmin. Lisää tekstitiedostoon seuraavaa:

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

Tapauksessa SharePoint Online sinun on lisättävä seuraava funktio vieritystapahtumaan #s4-workspace <div> -tunnisteessa. Ikkunan tapahtumat nimittäin ohitetaan sen varmistamiseksi, että valintanauha jää sivun yläosaan.

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

Tallenna tekstitiedosto JavaScript -tiedostona, jolla on .js-tunniste, esimerkiksi delayLoadImages.js.

Kun olet kirjoittanut valmiiksi tiedoston delayLoadImages.js, voit lisätä tiedoston sisällön SharePoint Online -perustyylisivulle. Tämän voit tehdä lisäämällä komentosarjalinkin perustyylisivun otsikkoon. Perustyylisivulle lisättynä JavaScript koskee kaikkia SharePoint Online -sivustosi sivuja, jotka käyttävät kyseisen perustyylisivun asettelua. Jos taas aiot käyttää tätä vain yhdellä sivustosi sivulla, upota JavaScript sivuun komentosarjaeditorin avulla. Saat lisätietoja seuraavista ohjeaiheista:

Esimerkki: Viittaus JavaScript -delayLoadImages.js file-tiedostoon perustyylisivulta kohteesta SharePoint Online   

Jotta tämä toimisi, sinun on viitattava perustyylisivulla myös jQueryyn. Seuraavassa esimerkissä näet, että sivun alkulatauksessa vain yksi kuva latautuu, vaikka sivulla on useampiakin.

Näyttökuva yhdestä sivulle ladatusta kuvasta

Seuraavassa näyttökuvassa näkyvät loput kuvat, jotka ladataan sen jälkeen kun ne vierivät näkymään.

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

Kuvien lataamisen viivyttäminen JavaScript:n avulla voi olla tehokas tapa parantaa suorituskykyä, mutta jos tätä menetelmää sovelletaan julkisella sivustolla, hakukoneet eivät voi selata kuvia samalla tavalla kuin ne selaavat tavanomaiseen tapaan muotoiltuja kuvia. Tämä voi vaikuttaa sivun luokitukseen eri hakukoneissa, koska kuvan metatiedot syntyvät oikeastaan vasta sivun latautuessa. Hakurobotit lukevat vain HTML-koodeja eivätkä siksi tunnista kuvia osaksi sivun sisältöä. Kuvat ovat yksi niistä tekijöistä, joiden perusteella sivuja luokitellaan hakutuloksissa. Yksi tapa kiertää tämä ongelma on varustaa kuvasi selittävillä teksteillä.

GitHub-koodiesimerkki: JavaScript keinona parantaa suorituskykyä

Tutustu GitHubin artikkeliin ja koodiesimerkkiin aiheesta JavaScriptin lisääminen.

Katso myös

Tuetut selaimet Office 2013:ssa ja Office 365 ProPlusissa

Ohjeet: Perustyylisivun soveltaminen SharePoint 2013 -sivuun

Ohjeet: Sivun asettelun luominen SharePoint 2013:ssa

Kehitä Office-taitojasi
Tutustu koulutusmateriaaliin
Saat uudet ominaisuudet ensimmäisten joukossa
Liity Office Insider -käyttäjiin

Oliko näistä tiedoista hyötyä?

Kiitos palautteesta!

Kiitos palautteestasi! Näyttää siltä, että Office-tukiedustajamme avusta voi olla sinulle hyötyä.

×