עיכוב בטעינת תמונות ו- 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. עשה זאת על-ידי הוספת קישור Script לכותרת העליונה של דף הבסיס. לאחר ההוספה שלו לדף הבסיס, JavaScript יוחל על כל הדפים באתר SharePoint Online המשתמשים בפריסת דף הבסיס. לחלופין, אם אתה מתכוון להשתמש באפשרות זו רק בדף אחד של האתר שלך, השתמש ב- Web Part של Script Editor כדי להטביע את ה- JavaScript בדף. עיין בנושאים הבאים לקבלת מידע נוסף:

דוגמה: הפניה לקובץ delayLoadImages.js של JavaScript מדף בסיס ב-    

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

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

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

צילום מסך המציג מספר תמונות טעונות בעמוד

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

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

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

למידע נוסף

דפדפנים נתמכים ב- Office 2013 וב- Office 365 ProPlus

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

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

הרחב את הכישורים שלך
סייר בהדרכה
קבל תכונות חדשות לפני כולם
הצטרף למשתתפי Office Insider

האם מידע זה היה שימושי?

תודה על המשוב!

תודה על המשוב! נראה שכדאי לקשר אותך לאחד מנציגי התמיכה של Office.

×