Забавяне при зареждане на изображения и 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 трябва да добавите функцията по-долу към събитието на превъртане в етикета <div> на #s4-workspace. Това се налага, тъй като събитията в прозореца се заместват, за да се гарантира, че лентата ще остане прикрепена към горната част на страницата.

//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 в страницата. Вижте тези теми за повече информация:

Пример: Създаване на препратка към файла delayLoadImages.js на JavaScript от страница образец в SharePoint Online   

За да работи това, трябва да създадете препратка и към jQuery в страницата образец. В примера по-долу можете да видите, че в първоначалното зареждане на страница има само едно заредено изображение, но че има още няколко изображения в страницата.

Екранна снимка, показваща едно заредено изображение на страница

Екранната снимка по-долу показва останалите изображения, които се изтеглят, след като попаднат в изгледа след превъртане.

Екранна снимка, показваща няколко заредени изображения на страница

Забавянето на зареждането на изображенията с помощта на JavaScript може да бъде ефективна техника за повишаване на производителността; въпреки това, ако техниката бъде приложена към публичен уеб сайт, търсачките няма да могат да обхождат изображенията по същия начин, по който биха обходили нормално формирани изображения. Това може да повлияе на класирането в търсачките, тъй като метаданните на самото изображение не са реално там, докато страницата не се зареди. Интернет роботите на търсачките четат само HTML кода и затова няма да видят изображенията като част от съдържанието на страницата. Изображенията са един от факторите, използвани за класиране на страниците в резултатите от търсенето. Едно от възможните заобиколни решения е да използвате въвеждащ текст за вашите изображения.

Примерен код от GitHub: Инжектиране на JavaScript за подобряване на производителността

Не пропускайте статията и примерния код за инжектиране на JavaScript, предоставени в GitHub.

Вж. също

Поддържани браузъри в Office 2013 и Office 365 ProPlus

Как да: Прилагане на страница образец към сайт в SharePoint 2013

Как да: Създаване на оформление на страница в SharePoint 2013

Разширете уменията си
Преглед на обучението
Получавайте първи новите функции
Присъединете се към участниците в Office Insider

Беше ли полезна тази информация?

Благодарим ви за обратната връзка!

Благодарим ви за вашата обратна връзка. Изглежда, че ще бъде полезно да ви свържем с един от нашите агенти по поддръжката на Office.

×