Задержка при загрузке изображений и JavaScript-файлов в SharePoint OnlineDelay loading images and JavaScript in SharePoint Online

В этой статье описывается, как уменьшить время загрузки страниц SharePoint Online с помощью JavaScript для задержки загрузки изображений, а также ожидания загрузки не важного JavaScript до окончания загрузки страницы.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.

Изображения могут отрицательно повлиять на скорость загрузки страниц в SharePoint Online.Images can negatively affect page load speeds on SharePoint Online. По умолчанию большинство современных интернет-браузеров предварительно загружают изображения при загрузке HTML-страницы.By default, most modern Internet browsers pre-fetch images when loading an HTML page. Это может привести к излишне медленной загрузке страницы, если изображения не видны на экране до тех пор, пока пользователь не прокрутит вниз.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. Изображения могут блокировать загрузку видимой части страницы браузером.The images can block the browser from loading the visible part of the page. Чтобы решить эту проблему, сначала можно использовать JavaScript, чтобы пропустить загрузку изображений.To work around this problem, you can use JavaScript to skip loading the images first. Кроме того, загрузка несуществующих JavaScript также может замедлить время загрузки на страницах SharePoint.Also, loading non-essential JavaScript can slow download times on your SharePoint pages too. В этом разделе описаны некоторые методы, которые можно использовать для улучшения времени загрузки страниц с Помощью JavaScript в SharePoint Online.This topic describes some methods you can use to improve page load times with JavaScript in SharePoint Online.

Улучшение времени загрузки страницы путем задержки загрузки изображений на страницах SharePoint Online с помощью JavaScriptImprove page load times by delaying image loading in SharePoint Online pages by using JavaScript

Вы можете использовать JavaScript, чтобы предотвратить использование веб-браузера для предварительного получения изображений.You can use JavaScript to prevent a web browser from pre-fetching images. Это ускоряет общую отрисовку документов.This speeds up overall document rendering. Для этого из тега удаляется значение атрибута SRC и заменяется путь к файлу в атрибуте <img> данных, например: 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. Например:For example:

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

С помощью этого метода браузер загружает изображения не сразу.By using this method, the browser doesn't download the images immediately. Если изображение уже находится в представлении, JavaScript сообщает браузеру извлечь URL-адрес из атрибута данных и вставить его в качестве значения атрибута 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. Изображение загружается только при прокрутке пользователя, и оно появляется в представлении.The image only loads as the user scrolls and it comes into view.

Чтобы все это произошло, необходимо использовать JavaScript.To make all of this happen, you'll need to use JavaScript.

В текстовом файле определите функцию isElementInViewport() для проверки того, находится ли элемент в части браузера, которая видна пользователю.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)
  );
}

Далее используйте функцию loadItemsInView() isElementInViewport().Next, use isElementInViewport() in the loadItemsInView() function. Функция loadItemsInView() загружает все изображения, которые имеют значение атрибута data-src, если они находятся в части браузера, которая видна пользователю.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"));
          }
      }
  });
}

Наконец, вызов loadItemsInView() из window.onscroll() как показано в следующем примере.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();
});

Для SharePoint Online необходимо прикрепить следующую функцию к событию прокрутки на теге #s4 рабочей <div> области.For SharePoint Online, you need to attach the following function to the scroll event on the #s4-workspace <div> tag. Это происходит из-за переопределения событий окна, чтобы лента оставалась прикрепленной к верхней части страницы.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();
});

Сохраните текстовый файл в виде файла JavaScript с расширением .js, например delayLoadImages.js.Save the text file as a JavaScript file with the extension .js, for example delayLoadImages.js.

После завершения записи delayLoadImages.js можно добавить содержимое файла на мастер-страницу в SharePoint Online.Once you've finished writing delayLoadImages.js, you can add the contents of the file to a master page in SharePoint Online. Это необходимо, добавив ссылку скрипта на заготвую страницу.You do this by adding a script link to the header in the master page. После того, как он будет на магистрали, JavaScript будет применяться на всех страницах сайта SharePoint Online, которые используют эту макетную страницу.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. Кроме того, если вы собираетесь использовать это только на одной странице сайта, используйте веб-часть редактора сценариев для встраить JavaScript на страницу.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. Дополнительные сведения см. в этих разделах:See these topics for more information:

Пример. Ссылки на файл JavaScript delayLoadImages.js с мастер-страницы в SharePoint OnlineExample: Referencing the JavaScript delayLoadImages.js file from a master page in SharePoint Online

Чтобы это работало, необходимо также ссылаться на jQuery на мастер-странице.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.

Снимок экрана: одно изображение загружено на странице

На следующем скриншоте показаны остальные изображения, скачиваемые после их прокрутки.The following screenshot shows the rest of the images that are downloaded after they scroll into view.

Снимок экрана: несколько изображений загружено на странице

Задержка загрузки изображений с помощью JavaScript может быть эффективным методом повышения производительности; однако, если метод применяется на общедоступный веб-сайт, поисковые системы не могут обхода изображений таким же образом, как они будут обходить регулярно сформированное изображение.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. Обходчики поисковых систем только читают HTML и поэтому не видят изображения в качестве контента на странице.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.

Пример кода GitHub: ввод JavaScript для повышения производительностиGitHub code sample: Injecting JavaScript to improve performance

Не пропустите пример статьи и кода в javaScript-впрыски, предоставленные на GitHub.Don't miss the article and code sample on JavaScript injection provided on GitHub.

См. такжеSee also

Поддерживаемые браузеры в Office 2013 и Microsoft 365 Apps для предприятияSupported browsers in Office 2013 and Microsoft 365 Apps for enterprise

Инструкции. Применение эталонной страницы к сайту в SharePoint 2013How to: Apply a master page to a site in SharePoint 2013

Инструкции. Создание макета страницы в SharePoint 2013How to: Create a page layout in SharePoint 2013