היי,
אשמח לקבלת עזרה בהכנת Pre-loader לעמוד HTML בבקשה!
האם זה אפשרי?
ואם כן אז איך בבקשה?

אני מתכוון להודעה כזאת של Loading... או אחוזים
(עדיף אחוזים בבקשה)

תודה! הנה דוגמא לאתר שיש לו pre-loader והוא לא בפלאש,
נסיתי לשמור את העמוד ולהוציא את הקוד אבל לא מצאתי אותו.
הנה כתובת:
http://www.partypeople.hu

פשוט העמוד שלי כבד ואני ממש צריך את זה!
כבר שבוע ימים שלם אני מחפש ולא מוצא איך עושים זאת, ככה שאני ממש אשמח לקבלת עזרה!

צור div ישירות מתחת ל-body שעוטף את כל תוכן האתר ועם ההגדרה display: none;
צור אלמנט נוסף ישירות מתחת ל-body עם ההודעה "Loading..." (או כל הודעה אחרת).
באירוע onload שנה את ההגדרה של ה-div עם תוכן האתר ל-display: block ואת אלמנט ההודעה ל-display: none.

ספירה עפ"י אחוזים ניתן לעשות רק עם flash.

זה סותר את מה שאמרת על display:none קודם לכן
סתם לא משנה, כן זו דרך נוחה וטובה לפי דעתי - אם רוצים בכלל לעשות דבר כזה.

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

צריכים להשתמש ב-visibility: hidden/visible

display: none עדיין טוען את התוכן.
הוא פשוט לא מציג אותו.

ההבדל בין visiblity: hidden הוא שעם display:none התוכן לא לוקח מקום בעמוד, ועם visibility:hidden הוא כן.

בדפדפני Gecko התוכן לא נטען כאשר הוא נמצא בתוך "קופסא" שמוגדרת כ-display:none הסיבה לכך היא מאוד פשוטה, אם אתה לא מציג את התוכן, אין טעם לטעון אותו. אם זה השתנה בגרסאות האחרונות של המנוע, אז זה לא ממש חדשות טובות.

בכל מקרה, הדרך הבטוחה ביותר היא להגדיר את הגובה והרוחב כ-0 או 1%.

לאחר בדיקה קטנה, עם תמונה של 500KB.
איכספלורר על כל סוגיו מעלה את התמונה לפני (5.5, 6, 7) - בדקתי על כל הסוגים בכוונה כי ב7 עשו כמה שינויים ניכרים.
השועל 1.5 (זה מה שיש לי) מתנהג אותו דבר (גם המוזילה מן הסתם).

מצד שני, אופרה, לא מעלה - ורק כשמוגדר לו block, רואים את התמונה יורדת



אני מעדיף את display:block.

תודה!
אבל לא הבנתי איך אני מגדיר את ה body עם ה onload בבקשה?

הנה מה שעשיתי עד עכשיו:

קוד:

<div title="loading-masage" style="visibility: visible;">loading...</div>
<div title="all_page" style="visibility: hidden;">
all page codes goes here bla bla bla
</div>

יקח לך חמש דקות ללמוד איך לעשות את זה אם תלמד מ-w3schools...

נכנסתי לאתר www.w3schools.com קראתי את המדריך, ועדיין לא הבנתי איך ליישם את מה שכתבתם לי.


אני אשמח לקבלת קוד והסבר דוגמא בסיסי למה שכתבתם בבקשה!!!