טעינה מאוחרת של סקריפטים (defer)

אחת הבעיות הכי גדולות בטעינת דפים היא טעינת סקריפטים במהלך הפירסור של ה html. במצב כזה, הפירסור יפסק, הסקריפט ירד, יפורסר, יופעל ורק אז פעולת הפרסור תמשך. במצב אידיאלי נרצה למנוע מכל הסקריפטים לרוץ במהלך הפירסור של הדף. (מצב אידאלי אחר הוא לאחר את כל טעינת הסקריפטים לאחרי השלמת הטעינה המלאה של הדף אבל על זה פעם אחרת).
זה לא תמיד יעבוד חלק כי במקרים מסוימים ישנם סקריפטים שצריכים להיטען בהתחלה (המקרה הברור יותר הוא jQuery אבל לא רק) לכן חשוב שתבדקו שלא נפגע כלום לאחר שתעשו את הפעולה.

כדי לטעון את הסקריפטים בלי לחסום את פירסור הדף נשתמש ב defer שמורה לדפדפן להוריד את הסקריפט ברקע ולא להריץ אותו במקום שהוא נתקל בו אלא לאחר שהסתיים הפרסור. ניתן להשתמשמ גם ב async אבל זה יגרום לסקריפטים לרוץ לא בהכרח לפי סדר הופעתם מה שיכול לגרום לבעיות במקרה שיש תלויות + זה לא ירוץ לאחר סיום הפרסור.

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

הכניסו את הקוד הבא לקובץ functions.php בתבנית הבת.

if (! is_admin())
{
     add_filter( 'script_loader_tag', function ( $tag, $handle ) {   
         return str_replace( ' src', ' defer="defer" src', $tag );
    }, 10, 2 );
}

אם תרצו להחריג סקריפטים מסוימים מ defer, כתבו כך:

if (! is_admin())
{
     add_filter( 'script_loader_tag', function ( $tag, $handle ) {   
         if (strpos( $tag, "jquery" )){	
             return $tag;
         }
         return str_replace( ' src', ' defer="defer" src', $tag );
    }, 10, 2 );
}

ואם תרצו התנהגות שונה לפי סוג דף לדוגמה, כתבו כך:

if (! is_admin())
{
     add_filter( 'script_loader_tag', function ( $tag, $handle ) {   
         if (is_front_page() && strpos( $tag, "someScript" )){
             return $tag;
         }
         return str_replace( ' src', ' defer="defer" src', $tag );
    }, 10, 2 );
}
0 0 דרג
דרג את הפוסט
הרשמה
Notify of
0 תגובות
Inline Feedbacks
הצג את כל התגובות

גם הסניפטים הבאים יעניינו אותך

0
אשמח לשמוע את דעתכם, מוזמנים להשאיר תגובהx