SharePoint Online’da resimleri ve JavaScript’i yüklemeyi geciktirme

Bu makalede, JavaScript kullanıp resimlerin yüklenmesini geciktirerek ve ayrıca temel öneme sahip olmayan JavaScript yüklemesini sayfa yüklenene kadar bekleterek, SharePoint Online sayfalarının yükleme süresini nasıl kısaltabileceğiniz açıklanır.

SharePoint Online’da resimler sayfa yükleme hızlarını olumsuz etkileyebilir. Varsayılan olarak, modern İnternet tarayıcılarının çoğu HTML sayfasını yüklerken resimleri önceden getirir. Bu yaklaşım, kullanıcılar kaydırırken resimler ekranda görünmüyorsa sayfanın gereksiz bir yavaşlıkta yüklenmesine neden olabilir. Resimler tarayıcının sayfanın görünür bölümünü yüklemesini engelleyebilir. Bu soruna geçici bir çözüm olarak, JavaScript kullanıp önce resimlerin yüklenmesini atlayabilirsiniz. Ayrıca, temel önem taşımayan JavaScript’in yüklenmesi de SharePoint sayfalarınızın yüklenme süresini yavaşlatabilir. Bu konu başlığı altında, SharePoint Online’da JavaScript ile sayfa yükleme sürelerini geliştirmek için kullanabileceğiniz bazı yöntemler açıklanır.

JavaScript kullanıp SharePoint Online’da resim yüklemesini geciktirerek sayfa yükleme sürelerini geliştirme

Web tarayıcısının resimleri önceden getirmesini engellemek için JavaScript kullanabilirsiniz. Bu, bir bütün olarak belge işleme sürecini hızlandırır. Bunu yapmak için, <img> etiketinden src özniteliğinin değerini kaldırır ve onun yerine bir veri özniteliğinde (data-src gibi) bir dosya yolu kullanırsınız. Örneğin:

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

Bu yöntem kullanıldığında, tarayıcı resimleri hemen indirmez. Resim zaten görünüm penceresindeyse, JavaScript tarayıcıya veri özniteliğindeki URL’yi almasını ve bunu src özniteliğinin değeri olarak eklemesini söyler. Resim ancak kullanıcı sayfayı kaydırdığında ve resim görüntüye geldiğinde yüklenir.

Bunların tümünü yapabilmek için, JavaScript kullanmalısınız.

Bir metin dosyasında, öğenin tarayıcıda kullanıcının görebildiği bir bölümde yer alıp almadığını denetlemek için isElementInViewport()    işlevini tanımlayın.

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

Ardından, loadItemsInView()    işlevinin içinde isElementInViewport()    işlevini kullanın. loadItemsInView()    işlevi, tarayıcıda kullanıcının görebildiği bir bölümde yer alan ve data-src özniteliğinde bir değer bulunan tüm resimleri yükler. Metin dosyasına aşağıdaki işlevi ekleyin:

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

Son olarak, aşağıdaki örnekte gösterildiği gibi window.onscroll()    işlevinin içinden loadItemsInView()    çağrısı yapın. Bu, görünüm penceresinde yer alan tüm resimlerin, kullanıcıya gerektiği zaman (daha öncesinde değil) yüklenmesini güvence altına alır. Metin dosyasına aşağıdakini ekleyin:

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

SharePoint Online’da, #s4-workspace <div> etiketine kaydırma olayı için aşağıdaki işlevi eklemeniz gerekir. Bunun nedeni, şeridin sayfanın en üstünde kaldığından emin olmak için pencere olaylarının geçersiz kılınmasıdır.

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

Metin dosyasını, .js uzantısıyla JavaScript dosyası olarak kaydedin; örneğin, delayLoadImages.js.

DelayLoadImages.js dosyasını yazmayı bitirdiğinizde, dosyanın içeriğini SharePoint Online’da bir ana sayfaya ekleyebilirsiniz. Bunu yapmak için, ana sayfadaki üst bilgiye bir betik bağlantısı eklersiniz. Ana sayfaya eklendikten sonra, JavaScriptSharePoint Online sitenizde o ana sayfa düzenini kullanan tüm sayfalara uygulanır. Alternatif olarak, bunu sitenizin tek bir sayfasında kullanmayı hedeflediyseniz, JavaScript’i sayfaya eklemek için betik düzenleyicisi Web Bölümünü kullanın. Daha fazla bilgi için şu konulara bakın:

Örnek: SharePoint Online’da bir ana sayfadan JavaScript delayLoadImages.js dosyasına başvurma   

Bu yöntemin çalışması için, ana sayfada jQuery’ye de başvurmanız gerekir. Aşağıdaki örnekte, sayfada birkaç resim bulunmasına karşın ilk sayfa yüklemesinde yalnızca bir resmin yüklendiğini görebilirsiniz.

Ağ diyagramındaki yeni bir görevin görüntüsü.

Aşağıdaki ekran görüntüsünde, kalan resimlerin ancak sayfa kaydırılıp görüntüye geldikleri zaman indirildikleri gösterilir.

Sayfaya birkaç resmin yüklendiğini gösteren ekran görüntüsü

JavaScript kullanarak resim yüklemesini geciktirme, performansı artırmaya yönelik etkili bir teknik olabilir; bununla birlikte, bu teknik bir genel web sitesine uygulanırsa arama motorları resimlerde, normal biçimlendirilmiş resimlerde olduğu gibi gezinemezler. Bu durum arama motorlarındaki derecelendirmeleri etkileyebilir çünkü resmin kendisinde bulunan meta veriler, sayfa yüklenene kadar gerçekten orada olmaz. Arama motoru gezginleri yalnızca HTML’yi okur ve dolayısıyla resimleri sayfadaki içerik olarak görmez. Resimler, arama sonuçlarında sayfaları derecelendirirken kullanılan faktörlerden biridir. Bu sorunla karşılaşmamanın bir yolu da resimleriniz için giriş metinleri kullanmaktır.

GitHub kod örneği: Performansı artırmak için JavaScript ekleme

GitHub’da sağlanan JavaScript ekleme makalesini ve kod örneğini kaçırmayın.

Ayrıca Bkz:

Office 2013 ve Office 365 ProPlus’ta desteklenen tarayıcılar

Nasıl yapılır: SharePoint 2013’te siteye ana sayfa ekleme

Nasıl yapılır: SharePoint 2013’te sayfa düzeni oluşturma

Yeteneklerinizi geliştirin
Eğitimleri keşfedin
Yeni özellikleri ilk olarak siz edinin
Office Insider Programına Katılın

Bu bilgi yararlı oldu mu?

Görüşleriniz için teşekkür ederiz!

Geri bildiriminiz için teşekkürler! Office destek temsilcilerimizden biriyle görüşmeniz yararlı olabilir.

×