تأخر تحميل الصور وJavaScript في SharePoint Online‏

توضح هذه المقالة كيفية تقليل وقت التحميل لصفحات SharePoint Online باستخدام JavaScript لتأخير تحميل الصور وبانتظار تحميل JavaScript غير الضرورية حتى بعد تحميل الصفحة.

يمكن أن تؤثر الصور سلباً على سرعة تحميل الصفحة في SharePoint Online. بشكل افتراضي، تقوم معظم مستعرضات الإنترنت الحديثة بإحضار الصور مسبقاً عند تحميل صفحة بتنسيق HTML. يمكن أن يؤدي ذلك إلى إبطاء تحميل الصفحة بشكل غير ضروري إذا لم تظهر الصور على الشاشة حتى يقوم المستخدم بالتمرير لأسفل. ويمكن أن تمنع الصور المستعرض من تحميل الجزء المرئي من الصفحة. لحل هذه المشكلة، يمكنك استخدام JavaScript لتخطي تحميل الصور أولاً. كما يمكن أن يؤدي تحميل JavaScript غير الضرورية إلى إبطاء أوقات التحميل في صفحات SharePoint أيضاً. يوضح هذا الموضوع بعض الأساليب التي يمكنك استخدامها لتحسين أوقات تحميل الصفحات باستخدام JavaScript في SharePoint Online.

تحسين أوقات تحميل الصفحات من خلال تأخير تحميل الصور في صفحات SharePoint Online باستخدام JavaScript

يمكنك استخدام JavaScript لمنع مستعرض الويب من إحضار الصور مسبقاً. يؤدي هذا إلى تسريع عملية عرض المستند. لتنفيذ ذلك، قم بإزالة قيمة السمة src من العلامة <img> واستبدلها بمسار ملف في سمة بيانات على سبيل المثال: data-src. على سبيل المثال:

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

باستخدام هذا الأسلوب، لا يتم تنزيل الصور مباشرةً بواسطة المستعرض. إذا كانت الصورة في منفذ العرض بالفعل، تطلب JavaScript من المستعرض استرداد URL من سمة البيانات وإدراجه كقيمة السمة 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 ProPlus

كيفية: تطبيق صفحة رئيسية على موقع في SharePoint 2013‏

كيفية: إنشاء تخطيط صفحة في SharePoint 2013‏

توسيع المهارات
استكشاف التدريب
الحصول على الميزات الجديدة أولاً
الانضمام إلى Office Insider

هل كانت المعلومات مفيدة؟

نشكرك على ملاحظاتك!

شكراً لك على الملاحظات! يبدو أنه من المفيد إيصالك بأحد وكلاء دعم Office لدينا.

×