תמונת בטעינה בזמן שהדף נטען

תמונת טוען נתונים

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

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

אתרי HTML / PHP

הקוד בנוי משלושה חלקים. הראשון הוא CSS אותו נוסיף לקובץ style.css שלנו או כל קובץ אחר בו אנו שומרים הגדרות CSS… החלק השני הוא קוד ג'אווה סקריפט אשר יחפש את המיכל (DIV) של התוכן הראשי של הדף שלנו ויציג אותו רק כאשר הדף סיים להטען.

לחצו כאן לקוד הCSS +
הערות:

[list_star]

  • זכרו לשנות את השם של האלמנט div#topContainer לID של הDIV אשר מכיל את כל הדף.
  • זכרו לשנות את המסלול של התמונה לתמונה שתרצו שתוצג בזמן שהדף נטען.
  • להורדת התמונה בה אני השתמשתי לחצו: כאן

[/list_star]

[css]

div#topContainer { display: none; }

div#pageLoading { background: url("images/loadingWide.gif") no-repeat scroll 0 0 transparent; cursor: wait; direction: rtl; height: 55px; margin: 10% auto; position: static; text-align: right; width: 160px; z-index: 1000; } [/css]

לחצו כאן לקוד הHTML +
הערות:

[list_star]

  • הוסיפו את הDIV הבא מיד לאחר תג ה <body>

[/list_star]

[html] <!–== במיכל זה תוצג התמונה טוען נתונים ==–> <div id="pageLoading"></div> [/html]

לחצו כאן לקוד הJAVASCRIPT +
הערות:

[list_star]

  • הטמיעו את הסקריפט לפני התג </head>

[/list_star]

[js] <script type="text/javascript">// <![CDATA[ function prepageload(){ document.getElementById("pageLoading").style.display = "none"; document.getElementById("topContainer").style.display = "block"; }//preloader window.onload = prepageload; // ]]></script> [/js]

אתרי וורדפרס

עבור אתרי וורדפרס נשתמש באותו הקוד בו השתמשנו לאתרי HTML / PHP אך נטמיע אותו בצורה קצת שונה כדי לחסוך זמן.

לחצו כאן לקוד הCSS +
הערות:

[list_star]

  • הוסיפו את הקוד הבא לקובץ style.css בתבנית שלכם.
  • זכרו לשנות את השם של האלמנט div#topContainer לID של הDIV אשר מכיל את כל הדף.
  • זכרו לשנות את המסלול של התמונה לתמונה שתרצו שתוצג בזמן שהדף נטען.
  • להורדת התמונה בה אני השתמשתי לחצו: כאן

[/list_star]

[css] div#topContainer { display: none; }

div#pageLoading { background: url("images/loadingWide.gif") no-repeat scroll 0 0 transparent; cursor: wait; direction: rtl; height: 55px; margin: 10% auto; position: static; text-align: right; width: 160px; z-index: 1000; } [/css]

לחצו כאן לקוד הHTML +
הערות:

[list_star]

  • הוסיפו את הDIV הבא מיד לאחר תג ה <body>
  • הוסיפו את הDIV לקבצים בהם אתם רוצים להציג תמונת "טוען נתונים" לדוגמה:
    • index.php
    • category.php
    • archive.php
    • page.php
    • search.php

[/list_star]

[html] <!–== במיכל זה תוצג התמונה טוען נתונים ==–> <div id="pageLoading"></div> [/html]

לחצו כאן לקוד הJAVASCRIPT +
הערות:

[list_star]

  • הוסיפו קוד זה לקובץ functions.php
  • כדי שיעבוד חייב שיהיה בתבנית שלכם את התג wp_head() בראש המסמך (רוב הסיכויים שיש לכם את התג אז אל תדאגו)

[/list_star]

[php] function whilePageLoads() { $whilePageLoads = ' <script type="text/javascript">// <![CDATA[ function preloader(){ document.getElementById("pageLoading").style.display = "none"; document.getElementById("topContainer").style.display = "block"; }//preloader window.onload = preloader; // ]]></script> '; echo $whilePageLoads; } add_action('wp_head', 'whilePageLoads'); [/php]

סיימנו! אני מקווה שמצאתם את המדריך למועיל וקל לשימוש. אם נשארתם עם שאלה אתם מוזמנים להשאיר אותה כתגובה ונשמח לעזור. תודה לכל מי שפרגן עם LIKE ובהצלחה.

  • אהבתם? שתפו!