Atraso no carregamento de imagens e JavaScript no SharePoint OnlineDelay loading images and JavaScript in SharePoint Online

Este artigo descreve como você pode diminuir o tempo de carga para páginas do SharePoint Online usando JavaScript para atrasar o carregamento de imagens e também aguardando para carregar JavaScript não essencial até que a página seja carregada.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.

As imagens podem afetar negativamente as velocidades de carga da página SharePoint Online.Images can negatively affect page load speeds on SharePoint Online. Por padrão, a maioria dos navegadores modernos da Internet pré-busca imagens ao carregar uma página HTML.By default, most modern Internet browsers pre-fetch images when loading an HTML page. Isso pode fazer com que a página seja desnecessariamente lenta para carregar se as imagens não estão visíveis na tela até que o usuário role para baixo.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. As imagens podem impedir o navegador de carregar a parte visível da página.The images can block the browser from loading the visible part of the page. Para resolver esse problema, você pode usar JavaScript para ignorar o carregamento das imagens primeiro.To work around this problem, you can use JavaScript to skip loading the images first. Além disso, carregar JavaScript não essencial também pode diminuir o tempo de download em SharePoint páginas.Also, loading non-essential JavaScript can slow download times on your SharePoint pages too. Este tópico descreve alguns métodos que você pode usar para melhorar os tempos de carregamento de página com JavaScript no SharePoint Online.This topic describes some methods you can use to improve page load times with JavaScript in SharePoint Online.

Melhorar os tempos de carregamento de página atrasando o carregamento de imagem em SharePoint online usando JavaScriptImprove page load times by delaying image loading in SharePoint Online pages by using JavaScript

Você pode usar o JavaScript para impedir que um navegador da Web pre-busque imagens.You can use JavaScript to prevent a web browser from pre-fetching images. Isso acelera a renderização geral do documento.This speeds up overall document rendering. Para fazer isso, remova o valor do atributo src da marca e substitua-o pelo caminho para um arquivo em um atributo de dados, <img> como: 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. Por exemplo:For example:

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

Usando esse método, o navegador não baixa as imagens imediatamente.By using this method, the browser doesn't download the images immediately. Se a imagem já estiver no viewport, JavaScript pedirá ao navegador para recuperar a URL do atributo de dados e inseri-la como o valor do atributo 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. A imagem só é carregada à medida que o usuário rola e ela entra em exibição.The image only loads as the user scrolls and it comes into view.

Para fazer tudo isso acontecer, você precisará usar JavaScript.To make all of this happen, you'll need to use JavaScript.

Em um arquivo de texto, defina a função isElementInViewport() para verificar se um elemento está ou não na parte do navegador visível para o usuário.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)
  );
}

Em seguida, use isElementInViewport() na função loadItemsInView().Next, use isElementInViewport() in the loadItemsInView() function. A função loadItemsInView() carregará todas as imagens que tenham um valor para o atributo data-src se elas estão na parte do navegador visível para o usuário.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. Adicione a seguinte função ao arquivo de texto: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"));
          }
      }
  });
}

Por fim, chame loadItemsInView() de dentro de window.onscroll() conforme mostrado no exemplo a seguir.Finally, call loadItemsInView() from within window.onscroll() as shown in the following example. Isso garante que todas as imagens que estão no viewport sejam carregadas conforme o usuário precisa delas, mas não antes.This ensures that any images that are in the viewport are loaded as the user needs them, but not before. Adicione o seguinte ao arquivo de texto:Add the following to the text file:

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

Para SharePoint Online, você precisa anexar a seguinte função ao evento de rolagem na marca <div> #s4-workspace.For SharePoint Online, you need to attach the following function to the scroll event on the #s4-workspace <div> tag. Isso ocorre porque os eventos da janela são substituídos para garantir que a faixa de opções permaneça anexada à parte superior da página.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();
});

Salve o arquivo de texto como um arquivo JavaScript com a extensão .js, por exemplo, delayLoadImages.js.Save the text file as a JavaScript file with the extension .js, for example delayLoadImages.js.

Depois de terminar de escrever delayLoadImages.js, você pode adicionar o conteúdo do arquivo a uma página mestra no SharePoint Online.Once you've finished writing delayLoadImages.js, you can add the contents of the file to a master page in SharePoint Online. Você faz isso adicionando um link de script ao header na página mestra.You do this by adding a script link to the header in the master page. Depois de estar em uma página mestra, o JavaScript será aplicado a todas as páginas em seu site SharePoint Online que usam esse layout de página mestra.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. Como alternativa, se você pretende usar isso apenas em uma página do seu site, use a Web Part do editor de scripts para inserir o JavaScript na página.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. Confira estes tópicos para obter mais informações:See these topics for more information:

Exemplo: fazendo referência ao arquivo javaScript delayLoadImages.js de uma página mestra no SharePoint OnlineExample: Referencing the JavaScript delayLoadImages.js file from a master page in SharePoint Online

Para que isso funcione, você também precisa fazer referência a jQuery na página mestra.In order for this to work, you also need to reference jQuery in the master page. No exemplo a seguir, você pode ver na carga inicial da página que há apenas uma imagem carregada, mas há várias outras na página.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.

Captura de tela mostrando uma imagem carregada na página

A captura de tela a seguir mostra o restante das imagens que são baixadas após rolarem para o exibição.The following screenshot shows the rest of the images that are downloaded after they scroll into view.

Captura de tela mostrando várias imagens carregadas na página

Atrasar o carregamento de imagem usando JavaScript pode ser uma técnica eficaz para aumentar o desempenho; no entanto, se a técnica for aplicada em um site público, os mecanismos de pesquisa não poderão rastrear as imagens da mesma maneira que rastreariam uma imagem formada regularmente.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. Isso pode afetar as classificações nos mecanismos de pesquisa porque os metadados na imagem em si não estão realmente lá até que a página seja carregada.This can affect rankings on search engines because metadata on the image itself is not really there until the page loads. Os rastreadores do mecanismo de pesquisa só leem o HTML e, portanto, não verão as imagens como conteúdo na página.Search engine crawlers only read the HTML and therefore will not see the images as content on the page. As imagens são um dos fatores usados para classificar páginas nos resultados da pesquisa.Images are one of the factors used to rank pages in search results. Uma maneira de resolver isso é usar texto introdutório para suas imagens.One way to work around this is to use introductory text for your images.

GitHub de código: Injetar JavaScript para melhorar o desempenhoGitHub code sample: Injecting JavaScript to improve performance

Não perca o artigo e o exemplo de código sobre a injeção javaScript fornecida GitHub.Don't miss the article and code sample on JavaScript injection provided on GitHub.

Confira tambémSee also

Navegadores com suporte no Office 2013 e Microsoft 365 Apps para Grandes EmpresasSupported browsers in Office 2013 and Microsoft 365 Apps for enterprise

Como: aplicar uma página mestra a um site no SharePoint 2013How to: Apply a master page to a site in SharePoint 2013

Tutorial: criar um layout de página no SharePoint 2013How to: Create a page layout in SharePoint 2013