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

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

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

אתרי HTML / PHP

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

		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;
		}
		

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

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

אתרי וורדפרס

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

		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;
		}
		

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

		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');
		

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