השהיית טעינת תמונות ו- 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/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 Online, עליך לצרף את הפונקציה הבאה לאירוע הגלילה #s4 div> של <סביבת העבודה. זאת משום שאירועי החלון מוחלפת כדי להבטיח שרצועת הכלים תישאר מצורפת לראש הדף.

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

שמור את קובץ הטקסט כקובץ JavaScript עם הסיומת .js, לדוגמה delayLoadImages.js.

לאחר שתסיים לכתוב delayLoadImages.js, תוכל להוסיף את תוכן הקובץ לדף ראשי ב- SharePoint Online. ניתן לעשות זאת על-ידי הוספת קישור Script לכותרת העליונה בעמוד הבסיס. לאחר שהוא יהיה בדף בסיס, JavaScript יוחל על כל הדפים באתר SharePoint Online המשתמשים בפריסת דף בסיס זו. לחלופין, אם בכוונתך להשתמש באפשרות זו בדף אחד בלבד של האתר שלך, השתמש ב- Web Part של עורך קבצי ה- Script כדי להטביע את JavaScript בדף. עיין בנושאים אלה לקבלת מידע נוסף:

לדוגמה: הפניה לקובץ javaScript delayLoadImages.js מתוך דף ראשי ב- SharePoint Online

כדי שפעולות אלה יפעלו, עליך גם להפנות ל- jQuery בדף הבסיס. בדוגמה הבאה, באפשרותך לראות בטעינת הדף ההתחלתית שיש רק תמונה אחת טעונת, אך ישנם כמה תמונות נוספות בדף.

צילום מסך המציג תמונה אחת שנטענות בדף.

צילום המסך הבא מציג את שאר התמונות שהורדו לאחר שהן גוללות לתצוגה.

צילום מסך המציג כמה תמונות שנטענו בדף.

עיכוב טעינת תמונות באמצעות JavaScript יכול להיות טכניקה יעילה להגברת הביצועים; עם זאת, אם הטכניקה מוחלת על אתר אינטרנט ציבורי, מנועי חיפוש אינם יכולים לסרוק את התמונות באותו אופן שבו הם סורקים תמונה שנוצרה באופן קבוע. הדבר יכול להשפיע על דירוגים במנועי חיפוש מכיוון שמטה-נתונים בתמונה עצמה לא יהיו שם עד שהדף יטען. סורקי מנועי חיפוש קוראים רק את ה- HTML ולכן לא יראו את התמונות כתוכן בדף. תמונות הן אחד הגורמים המשמשים כדי לדרג דפים בתוצאות חיפוש. דרך אחת לעקוף זאת היא להשתמש בטקסט מבוא עבור התמונות שלך.

דוגמת קוד GitHub: הוספת JavaScript לשיפור הביצועים

אל תחמיץ את המאמר ואת דוגמת הקוד על הזרקת JavaScript שסופקה ב- GitHub.

למידע נוסף

דפדפנים נתמכים ב- Office 2013 יישומי Microsoft 365 לארגונים

כיצד לבצע: החלת דף בסיס על אתר ב- SharePoint 2013

כיצד לבצע: יצירת פריסת דף ב- SharePoint 2013