Задержка при загрузке изображений и файлов JavaScript в SharePoint Online

В этой статье объясняется, как уменьшить время загрузки страниц SharePoint Online, задерживая загрузку изображений с помощью JavaScript или загружая второстепенные файлы JavaScript уже после загрузки страницы.

Изображения могут замедлять загрузку страниц в SharePoint Online. По умолчанию большинство современных веб-браузеров заранее извлекают изображения при загрузке HTML-страницы. В результате загрузка страницы неоправданно замедляется, если изображения становятся видны пользователю только после прокрутки экрана. При этом изображения могут не дать браузеру загрузить видимую часть страницы. Чтобы обойти эту проблему, используйте JavaScript для пропуска предварительной загрузки изображений. Загрузка второстепенных файлов JavaScript также может замедлять загрузку страниц SharePoint. В этой статье описаны некоторые способы ускорения загрузки страниц с помощью JavaScript в SharePoint Online.

Ускорение загрузки страниц за счет задержки загрузки изображений на страницах SharePoint Online с помощью JavaScript

JavaScript поможет вам предотвратить предварительное извлечение изображений в веб-браузере. Это ускорит отображение всего документа. Для этого нужно удалить значение атрибута src из тега <img> и указать вместо него путь к файлу, определяемому атрибутом data, например: data-src. Пример:

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

При этом браузер не будет загружать изображения сразу. Если изображение уже находится в окне просмотра, JavaScript передает браузеру, что нужно взять URL-адрес из атрибута data и вставить его в качестве значения атрибута src. Изображение загружается только тогда, когда попадает в окно просмотра после выполнения прокрутки пользователем.

Для этого необходимо использовать JavaScript.

В текстовом файле определите функцию isElementInViewport()   , которая будет проверять, находится ли элемент в той части браузера, которая видна пользователю.

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

Затем используйте функцию isElementInViewport()    в функции loadItemsInView()   . Функция loadItemsInView()    будет загружать изображения, значение которых соответствует атрибуту data-src, если они находятся в той части браузера, которая видна пользователю. Добавьте в текстовый файл следующую функцию:

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()   , как показано в приведенном ниже примере. Это гарантирует загрузку всех изображений в окне просмотра тогда, когда они будут нужны пользователю, но не раньше. Добавьте в текстовый файл следующее:

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

Для SharePoint Online необходимо добавить к событию прокрутки в теге #s4-workspace <div> указанную ниже функцию. Это вызвано тем, что события окна переопределяются, чтобы лента оставалась закрепленной в верхней части страницы.

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

Сохраните текстовый файл как файл JavaScript с разрешением .js, например delayLoadImages.js.

После создания файла delayLoadImages.js вы можете добавить его контент на главную страницу в SharePoint Online. Для этого добавьте ссылку на скрипт в заголовок на главной странице. Файл JavaScript, добавленный на главную страницу, будет применяться ко всем страницам сайта SharePoint Online, для которых используется макет этой главной страницы. Если же вы собираетесь использовать его только на одной странице сайта, внедрите JavaScript на страницу с помощью веб-части редактора скриптов. Статьи с дополнительными сведениями:

Пример: создание ссылки на JavaScript-файл delayLoadImages.js на главной странице в SharePoint Online   

Для этого вам также потребуется создать ссылку на jQuery на главной странице. В приведенном ниже примере видно, что при первоначальной загрузке страницы загружается только одно изображение, хотя на странице есть еще несколько.

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

На приведенном ниже снимке экрана показаны остальные изображения, которые загружаются после того, как попадают в окно просмотра в результате прокрутки.

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

Задержка загрузки изображений с помощью JavaScript — эффективный способ повышения производительности. Но если этот способ применяется на общедоступном веб-сайте, поисковые системы не могут выполнять обход изображений так же, как изображений, сформированных обычным способом. Это может повлиять на ранжирование в поисковых системах, поскольку метаданные самого изображения недоступны, пока не загрузится страница. Программы-обходчики поисковых систем могут прочитать только HTML-код, но не увидят изображения как контент страницы. Изображения — лишь один из факторов, используемых для ранжирования страниц в результатах поиска. Обойти эту проблему можно только одним способом: использовать вводный текст для изображений.

Образец кода GitHub: внедрение JavaScript для повышения производительности

Не пропустите статью и образец кода в разделе, посвященном внедрению JavaScript, на сайте GitHub.

См. также

Поддерживаемые браузеры в Office 2013 и Office 365 профессиональный плюс

Инструкции: применение главной страницы к сайту в SharePoint 2013

Инструкции: создание макета страницы в SharePoint 2013

Совершенствование навыков
Перейти к обучению
Первоочередный доступ к новым возможностям
Присоединиться к программе предварительной оценки Office

Были ли сведения полезными?

Спасибо за ваш отзыв!

Благодарим за отзыв! Возможно, будет полезно связать вас с одним из наших специалистов службы поддержки Office.

×