مشاركة عبر

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

  • مقالة

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

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

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

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

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

في هذه الطريقة، لا يقوم المستعرض بتنزيل الصور على الفور. إذا كانت الصورة موجودة بالفعل في منفذ العرض، فإن JavaScript يخبر المتصفح باسترداد عنوان URL من سمة البيانات وإدراجه كقيمة للسمة src. يتم تحميل الصورة فقط أثناء تمرير المستخدم وتأتي في العرض.

لتنفيذ هذه الدالة، تحتاج إلى استخدام JavaScript.

في ملف نصي، حدد الدالة isElementInViewport() للتحقق مما إذا كان عنصر ما في جزء المستعرض المرئي للمستخدم أم لا.

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

بعد ذلك، استخدم 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، تحتاج إلى إرفاق الدالة التالية بحدث التمرير على علامة #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 عن طريق إضافة ارتباط برنامج نصي إلى العنوان في الصفحة الرئيسية. بمجرد أن يكون في صفحة رئيسية، يتم تطبيق JavaScript على جميع الصفحات في موقع SharePoint الذي يستخدم تخطيط الصفحة الرئيسية هذا. بدلا من ذلك، إذا كنت تنوي استخدام الوظيفة فقط على صفحة واحدة من موقعك، فاستخدم جزء ويب لمحرر البرنامج النصي لتضمين JavaScript في الصفحة. لمزيد من المعلومات، اطلع على:

مثال: الرجوع إلى ملف javaScript delayLoadImages.js من صفحة رئيسية في SharePoint

لكي يعمل هذا المثال، تحتاج أيضا إلى الرجوع إلى jQuery في الصفحة الرئيسية. في المثال التالي، يمكنك أن ترى في تحميل الصفحة الأولية أن هناك صورة واحدة فقط محملة ولكن هناك عدة صور أخرى على الصفحة.

لقطة شاشة تعرض صورة واحدة تم تحميلها على الصفحة.

تظهر لقطة الشاشة التالية بقية الصور التي يتم تنزيلها بعد التمرير إلى طريقة العرض.

لقطة شاشة تعرض العديد من الصور التي تم تحميلها على الصفحة.

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

نموذج التعليمات البرمجية GitHub: إدخال JavaScript لتحسين الأداء

لا تفوت المقالة ونموذج التعليمات البرمجية على إدخال JavaScript المقدم على GitHub.

راجع أيضًا

المستعرضات المدعومة في Office 2013 Microsoft 365 Apps for enterprise

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

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