Ritardo caricamento immagini e JavaScript in SharePoint OnlineDelay loading images and JavaScript in SharePoint Online

In questo articolo viene descritto come ridurre il tempo di caricamento per le pagine di SharePoint Online utilizzando JavaScript per ritardare il caricamento delle immagini e anche in attesa di caricare JavaScript non essenziale fino al caricamento della pagina.This article describes how you can decrease the load time for SharePoint Online pages by using JavaScript to delay loading images and also by waiting to load non-essential JavaScript until after the page loads.

Le immagini possono influenzare negativamente la velocità di caricamento della pagina in SharePoint Online.Images can negatively affect page load speeds on SharePoint Online. Per impostazione predefinita, i browser Internet più moderni pre-recuperano immagini durante il caricamento di una pagina HTML.By default, most modern Internet browsers pre-fetch images when loading an HTML page. Ciò può far sì che la pagina si carichi lentamente senza motivo se le immagini non sono visibili sullo schermo fino a quando l'utente scorre verso il basso.This can cause the page to be unnecessarily slow to load if the images are not visible on the screen until the user scrolls down. Le immagini possono impedire al browser di caricare la parte visibile della pagina.The images can block the browser from loading the visible part of the page. Per risolvere questo problema, è possibile utilizzare JavaScript per ignorare prima il caricamento delle immagini.To work around this problem, you can use JavaScript to skip loading the images first. Inoltre, il caricamento di JavaScript non indispensabile può rallentare i tempi di download anche nelle pagine di SharePoint.Also, loading non-essential JavaScript can slow download times on your SharePoint pages too. In questo argomento vengono descritti alcuni metodi utilizzabili per migliorare i tempi di caricamento delle pagine con JavaScript in SharePoint Online.This topic describes some methods you can use to improve page load times with JavaScript in SharePoint Online.

Migliorare i tempi di caricamento delle immagini nelle pagine caricando le pagine di SharePoint Online tramite JavaScriptImprove page load times by delaying image loading in SharePoint Online pages by using JavaScript

È possibile utilizzare JavaScript per impedire a un browser Web di pre-recuperare le immagini.You can use JavaScript to prevent a web browser from pre-fetching images. Ciò consente di velocizzare il rendering complessivo del documento.This speeds up overall document rendering. Per eseguire questa operazione, è necessario rimuovere il valore dell'attributo src dal <img> tag e sostituirlo con il percorso di un file in un attributo dati, ad esempio: data-src.To do this you remove the value of the src attribute from the <img> tag and replace it with the path to a file in a data attribute such as: data-src. Ad esempio:For example:

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

Se si utilizza questo metodo, il browser non scaricherà immediatamente le immagini.By using this method, the browser doesn't download the images immediately. Se l'immagine è già nel riquadro di visualizzazione, JavaScript indica al browser di recuperare l'URL dall'attributo dati e di inserirlo come valore per l'attributo src.If the image is already in the viewport, JavaScript tells the browser to retrieve the URL from the data attribute and insert it as the value for the src attribute. L'immagine viene caricata solo quando l'utente scorre e arriva all'immagine.The image only loads as the user scrolls and it comes into view.

Per rendere tutto questo possibile, è necessario utilizzare JavaScript.To make all of this happen, you'll need to use JavaScript.

In un file di testo, definire la funzione isElementInViewport() per controllare se un elemento fa o meno parte del browser visibile all'utente.In a text file, define the isElementInViewport() function to check whether or not an element is in the part of the browser that is visible to the user.

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

Utilizzare quindi isElementInViewport() nella funzione loadItemsInView(). La funzione loadItemsInView() caricherà tutte le immagini con un valore per l'attributo dati-src se fanno parte del browser visibile all'utente. Aggiungere la seguente funzione al file di testo:Next, use isElementInViewport() in the loadItemsInView() function. The loadItemsInView() function will load all images that have a value for the data-src attribute if they are in the part of the browser that is visible to the user. Add the following function to the text file:

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

Infine, chiamare loadItemsInView() da window.onscroll() come illustrato nell'esempio seguente. In questo modo tutte le immagini presenti nel riquadro di visualizzazione sono caricate quando ne ha bisogno l'utente, ma non prima. Aggiungere quanto segue al file di testo:Finally, call loadItemsInView() from within window.onscroll() as shown in the following example. This ensures that any images that are in the viewport are loaded as the user needs them, but not before. Add the following to the text file:

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

Per SharePoint Online, è necessario collegare la funzione seguente all'evento Scroll sul tag #s4-Workspace <div> .For SharePoint Online, you need to attach the following function to the scroll event on the #s4-workspace <div> tag. Questo perché gli eventi della finestra vengono ignorati per garantire che la barra multifunzione rimanga collegata alla parte superiore della pagina.This is because the window events are overridden in order to ensure the ribbon remains attached to the top of the page.

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

Salvare il file di testo come un file JavaScript con estensione js, ad esempio delayLoadImages.js.Save the text file as a JavaScript file with the extension .js, for example delayLoadImages.js.

Dopo aver completato la scrittura delayLoadImages.js, è possibile aggiungere il contenuto del file a una pagina master in SharePoint Online.Once you've finished writing delayLoadImages.js, you can add the contents of the file to a master page in SharePoint Online. È possibile farlo aggiungendo un link di script all'intestazione nella pagina master.You do this by adding a script link to the header in the master page. Una volta che si trova in una pagina master, il codice JavaScript verrà applicato a tutte le pagine del sito di SharePoint online in cui viene utilizzato il layout di pagina master.Once it's in a master page, the JavaScript will be applied to all pages in your SharePoint Online site that use that master page layout. In alternativa, se si prevede di utilizzarlo solo in una pagina del sito, è possibile utilizzare l'editor di script Web Part per incorporare JavaScript nella pagina.Alternatively, if you intend to only use this on one page of your site, use the script editor Web Part to embed the JavaScript into the page. Per ulteriori informazioni, vedere i seguenti argomenti:See these topics for more information:

Esempio: Fare riferimento al file JavaScript delayLoadImages.js da una pagina master in SharePoint OnlineExample: Referencing the JavaScript delayLoadImages.js file from a master page in SharePoint Online

Affinché funzioni, è necessario fare riferimento a jQuery nella pagina master. Nell'esempio seguente, è possibile visualizzare il caricamento della pagina iniziale dove viene caricata solo un'immagine, ma ce ne sono molte altre nella pagina.In order for this to work, you also need to reference jQuery in the master page. In the following example, you can see in the initial page load that there is only one image loaded but there are several more on the page.

Schermata che mostra un'immagine caricata nella pagina

Nella schermata seguente vengono mostrate le restanti immagini che vengono scaricate dopo lo scorrimento nella visualizzazione.The following screenshot shows the rest of the images that are downloaded after they scroll into view.

Schermata che mostra varie immagini caricate nella pagina

Ritardare il caricamento delle immagini tramite JavaScript può essere una tecnica efficace per aumentare le prestazioni. Tuttavia, se la tecnica viene applicata a un sito Web pubblico, allora i motori di ricerca non sono in grado di eseguire ricerche per indicizzazione delle immagini nello stesso modo in cui si farebbe una ricerca per indicizzazione di un'immagine regolarmente formata. Questo può influire sulla classificazione nei motori di ricerca perché i metadati dell'immagine stessa non sono realmente presenti fino a quando non viene caricata la pagina. I crawler dei motori di ricerca leggono solo il codice HTML e pertanto non vedranno le immagini come contenuto nella pagina. Le immagini sono uno dei fattori utilizzati per classificare le pagine nei risultati della ricerca. Un modo per risolvere il problema consiste nell'utilizzare testo introduttivo per le immagini.Delaying image loading by using JavaScript can be an effective technique in increasing performance; however, if the technique is applied on a public website then search engines are not able to crawl the images in the same way they would crawl a regularly formed image. This can affect rankings on search engines because metadata on the image itself is not really there until the page loads. Search engine crawlers only read the HTML and therefore will not see the images as content on the page. Images are one of the factors used to rank pages in search results. One way to work around this is to use introductory text for your images.

Esempio di codice GitHub: inserimento di JavaScript per migliorare le prestazioniGitHub code sample: Injecting JavaScript to improve performance

Non perdetevi l'articolo e il codice di esempio su JavaScript Injection fornito su GitHub.Don't miss the article and code sample on JavaScript injection provided on GitHub.

Vedere ancheSee also

Browser supportati in Office 2013 e Microsoft 365 Apps for EnterpriseSupported browsers in Office 2013 and Microsoft 365 Apps for enterprise

Procedura: applicazione di una pagina master a un sito in SharePoint 2013How to: Apply a master page to a site in SharePoint 2013

Procedura: Create a page layout in SharePoint 2013How to: Create a page layout in SharePoint 2013