טעינת תמונות בשיטת Lazy Load

Lazy Load הינה שיטה לקיצור זמן טעינת העמוד ע״י דחיית טעינת התמונות עד לרגע שהגולש מגיע לאיזור בו מוצגת התמונה ואז הדפדפן יטען אותה.

  • 533 צפיות

תמונות הינן חלק בלתי נפרד מבנייה של אתר אינטרנט, אך לרוב תמונות אלו גורמות להארכת זמן טעינת העמוד, גם אם הן עברו אופטימיזציה ו/או מוגשות דרך CDN.

כאשר הדפדפן טוען עמוד, מתבצעות מספר קריאות HTTP שתפקידן הן לאחזר ״נכסים״ שונים כגון, קבצי JavaScript, קבצי CSS ותמונות.

שיטת ה-Lazy Load

Lazy Load הינה שיטה אשר באה לענות על זה בצורה פשוטה של הפחתה בקריאות HTTP מה שגורם לעמוד להיטען מהר יותר מכיוון שהדפדפן לא צריך לחכות שכלל קריאות ה-HTTP יסתיימו וכלל ה-״נכסים״ יטענו.
שיטה זאתי בעצם מאפשרת לנו לטעון תמונות On-Demand, כלומר, התמונות לא נטענות כל עוד הגולש לא הגיע לחלק בו התמונה אמורה להיות מוצגת.

אז איך זה עובד?

על מנת למנוע טעינה של התמונות, אנחנו גורמים לדפדפן לא להוריד את התמונות ע״י כך שאנחנו לא מספקים את תכונת (attribute) ה-src.
במקום להשתמש בתכונת ה-src, אנחנו שומרים את הקישור לתמונה בתכונת data לבחירתנו.

<img data-src="https://www.dorzki.co.il/wp-content/themes/dorzki_blog/assets/images/logo.png" alt="">

כעת, עלינו לזהות האם הגולש הגיע למקום אשר בו אמורה להיות תמונה, ובמידה והגענו למקום כזה, עלינו להעתיק את הקישור לתמונה מה-data-src> לתכונת ה-src, דבר אשר יחייב את הדפדפן להוריד את התמונה בזמן אמת.

על מנת לזהות האם הגולש הגיע לאלמנט מסויים נשתמש בתוסף jQuery בשם Viewport Selectors.

jQuery( document ).ready( function( $ ) {

  $( document ).scroll( function() {
    $( 'img[data-src]:in-viewport' ).attr( 'src', function() {
      return $( this ).data( 'src' );
    } ).removeAttr( 'data-src' );
  } );

} );
  • שורה 3 // אנחנו מצמידים פונקציה מסויימת לגלילה, כך שבעצם כל פעם שהגולש יגלול, בין אם למעלה, למטה או לצדדים הפונקציה תופעל.
  • שורות 4 – 6 // כעת אנחנו מגדירים selector אשר בודק האם קיים במקום בו הגולש נמצא אלמנט אשר מכיל את התכונה data-src, במידה וקיים מקרה כזה, אנחנו נעתיק את הערך מ-data-src אל תכונת ה-src ולבסוף נסיר את ה-data-src.

לבסוף, על מנת להשלים הקוד שלנו, נוסיף קצת CSS על מנת לבצע אנימציה שתהיה נעימה לעין כאשר התמונה נטענת.

img {
    opacity: 1;
    transition: opacity 1s ease;
}

img[data-src] {
    opacity: 0;
}

מה שאנחנו למעשה עושים זה מחביאים את התגית ורק כאשר התמונה נטענה והסרנו את ה-data-src, התמונה תופיעה עם אנימציה fade-in.

בונוס – חיבור ל-WordPress

על מנת להשתמש בקוד הנ״ל באתר WordPress שלנו, נצטרך לבצע את הצעדים הבאים:

  1. נעתיק את קוד ה-JavaScript לקובץ JavaScript של התבנית.
  2. נעתיק את קוד ה-CSS לקובץ ה-CSS של התבנית.
  3. נוריד את הסקריפט Viewport Selectors ונשמור אותו תחת התבנית שלנו בתיקיית /assets/js/.
  4. נרשום את הסקריפט של ה-Viewport Selectors ב-WordPress ע״י העתקה של הקוד הבא לקובץ functions.php:
    function dorzki_load_scripts() {
    
      wp_enqueue_script( 'viewport-js', get_template_directory_uri() . '/assets/js/jquery.viewport.mini.js', array( 'jquery' ), '1.0', true );
    
    }
    
    add_action( 'wp_enqueue_scripts', 'dorzki_load_scripts' );
  5. לבסוף נוסיף את הקוד הבא לקובץ functions.php, תפקידו לזהות היכן קימות תגיות של תמונות ולהחליף מ-src ל-data-src.
    function dorzki_lazy_load_image_replace( $content ) {
    
      return preg_replace( '/(src="[^"]*")/', 'data-$1', $content );
    
    }
    
    add_filter( 'the_content', 'dorzki_lazy_load_image_replace' );

סיכום

Lazy Load הינה שיטה קלה ומהירה לקיצוץ בזמן טעינת העמוד, מומלץ להשתמש בה מכיוון שמלבד נושא זמן טעינת העמוד, שימוש ב-Lazy Load מאפשר חיסכון במאשבים מצד השרת והלקוח.


Facebook
Twitter
LinkedIn
Google+
GitHub
RSS