קונספט טעינת HTML/JS יכול לעזור לך לשלוט בהתנהגות דף האינטרנט לאחר טעינתו.

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

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

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

כיצד להשתמש ב-onLoad עם אלמנט ה-HTML של גוף

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

הקוד המשמש בפרויקט זה זמין ב-a מאגר GitHub והוא בחינם עבורך לשימוש תחת רישיון MIT.

  1. בקובץ HTML חדש שנקרא index.html, הוסף את קוד ה-HTML הבסיסי הבא:
    html>
    <html>
    <רֹאשׁ>
    <כותרת>דוגמה באמצעות onloadכותרת>
    רֹאשׁ>
    <גוּף>
    <h1>דוגמה באמצעות onload()h1>
    <ע>דוגמה זו מדגימה כיצד להשתמש באירוע onload() ב-JavaScript.ע>
    גוּף>
    html>
  2. צור קובץ חדש באותה תיקיה שנקראת script.js
    instagram viewer
    . קשר את הקובץ הזה לדף ה-HTML שלך באמצעות תג הסקריפט. אתה יכול להוסיף את תג הסקריפט בתחתית תג הגוף:
    <גוּף>
     התוכן שלך 
    <תַסרִיטsrc="script.js">תַסרִיט>
    גוּף>
  3. בתוך התוכן בתג גוף ה-HTML שלך, הוסף תג פסקה ריק.
    <עתְעוּדַת זֶהוּת="תְפוּקָה">ע>
  4. בתוך קובץ JavaScript, הוסף את ה window.onload פונקציית אירוע. פעולה זו תתבצע כאשר הדף ייטען:
    חַלוֹן.onload = פוּנקצִיָה() {
    // קוד להפעלה כאשר הדף נטען
    };
  5. בתוך הפונקציה, אכלס את התוכן של תג הפסקה הריק. פעולה זו תשנה את תג הפסקה כך שתציג הודעה רק כאשר הדף נטען:
    מסמך.getElementById("תְפוּקָה").innerHTML = "הדף נטען!";
  6. לחילופין, אתה יכול גם השתמש במאזין אירועים להקשיב ל DOMContentLoaded מִקרֶה. DOMContentLoaded מפעילים מוקדם יותר מ-window.onload. זה מופעל ברגע שמסמך ה-HTML מוכן, במקום לחכות לטעינת כל המשאבים החיצוניים.
    מסמך.addEventListener('DOMContentLoaded', פוּנקצִיָה() {
    מסמך.getElementById("תְפוּקָה").innerHTML = "הדף נטען!";
    });
  7. פתח את הקובץ index.html בדפדפן אינטרנט, כדי להציג את ההודעה עם סיום טעינת הדף:
  8. במקום להשתמש באירועי JavaScript כדי לבדוק אם דף נטען, אתה יכול גם להשתמש ב- עומס תכונת HTML עבור אותה תוצאה. הוסף את תכונת onload לתג body בקובץ ה-HTML שלך:
    <גוּףעומס="init()">
  9. צור את init() פונקציה בתוך קובץ JavaScript. לא מומלץ להשתמש גם בתכונת onload HTML וגם באירוע JavaScript onload בו-זמנית. פעולה זו עלולה להוביל להתנהגות בלתי צפויה או לעימותים בין שתי הפונקציות.
    פוּנקצִיָהinit() {
    מסמך.getElementById("תְפוּקָה").innerHTML = "הדף נטען!";
    }

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

כיצד להשתמש ב-OnLoad עם אלמנט ה-HTML של תמונה

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

  1. בתוך אותה תיקייה כמו קובץ index.html שלך, הוסף כל תמונה.
  2. בתוך קובץ ה-HTML, הוסף תג תמונה וקשר את התכונה src לשם התמונה שנשמרה בתיקייה.
    <imgתְעוּדַת זֶהוּת="התמונה שלי"src="Pidgeymon.png"רוֹחַב="300">
  3. הוסף תגית פסקה ריקה נוספת כדי להציג הודעה כאשר התמונה נטענת:
    <עתְעוּדַת זֶהוּת="imageLoadedMessage">ע>
  4. בתוך קובץ JavaScript, הוסף אירוע טעינה על התמונה. השתמש במזהה הייחודי התמונה שלי כדי לקבוע לאיזה רכיב תמונה להוסיף את אירוע ההעלאה:
    var myImage = מסמך.getElementById("התמונה שלי");
    myImage.onload = פוּנקצִיָה() {

    };
  5. בתוך אירוע ההעלאה, שנה את ה-HTML הפנימי כדי להוסיף את התמונה נטענה הוֹדָעָה:
    מסמך.getElementById("imageLoadedMessage").innerHTML = "התמונה נטענה!";
  6. במקום להשתמש myImage.onload, אתה יכול גם להשתמש במאזין אירועים כדי להאזין ל לִטעוֹן אירוע JavaScript:
    myImage.addEventListener('לִטעוֹן', פוּנקצִיָה() {
    מסמך.getElementById("imageLoadedMessage").innerHTML = "התמונה נטענה!";
    });
  7. פתח את index.html בדפדפן אינטרנט כדי להציג את התמונה וההודעה:
  8. לאותה תוצאה, אתה יכול גם להשתמש בתכונה onload HTML. בדומה לתג body, הוסף תכונת onload לתג img:
    <imgתְעוּדַת זֶהוּת="התמונה שלי"src="Pidgeymon.png"רוֹחַב="300"עומס="imageLoaded()">
  9. הוסף את הפונקציה בקובץ ה-JavaScript, כדי להפעיל את הקוד כשהתמונה נטענת:
    פוּנקצִיָהimageLoaded() {
    מסמך.getElementById("imageLoadedMessage").innerHTML = "התמונה נטענה!";
    }

כיצד להשתמש ב-onLoad בעת טעינת ה-JavaScript

אתה יכול להשתמש בתכונת HTML onload כדי לבדוק אם הדפדפן סיים לטעון את קובץ ה-JavaScript. אין אירוע טעינה מקביל של JavaScript עבור תג הסקריפט.

  1. הוסף את תכונת onload לתג הסקריפט בקובץ ה-HTML שלך.
    <תַסרִיטsrc="script.js"עומס="LoadedJs()">תַסרִיט>
  2. הוסף את הפונקציה לקובץ ה-JavaScript שלך. הדפס הודעה מאת התחברות לקונסולת הדפדפן:
    פוּנקצִיָהLoadedJs() {
    לְנַחֵם.עֵץ("JS נטען על ידי הדפדפן!");
    }
  3. פתח את הקובץ index.html בדפדפן. אתה יכול השתמש ב-Chrome DevTools כדי להציג כל הודעות פלט לתוך המסוף.

טעינת דפי אינטרנט בדפדפן

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

אתה יכול ללמוד עוד על איך אתה יכול לשלב עיצובים מעניינים יותר של דפי טעינה באתר האינטרנט שלך.