JS | הצגת תמונת loading אחרי שליחת טופס. - הוסטס

Tal. · 10-01-11, 19:51

אני הרבה זמן שובר תראש ולא מצליח.
אני צריך ליצור FORM פשוט כשיילחצו על הכפתור תוצג תמונה כזאת שזזה ויהיה רשום loading

בניתי משהו די פשוט:

קוד:

<html>
<div id="load" style="display: none;">
    
            
                    
                    
טוען.. אנא המתן 
<img src='/images/load.gif' />


</div>

<form action="loader.php" onsubmit="return ray.ajax()">
<input type="submit">
</form>


</html>

<SCRIPT type="text/javascript">
var ray=
{
    ajax:function(st)
    {
        this.show('load');
    },
    show:function(el)
    {
   

        this.getID(el).style.display='';

    },
    getID:function(el)
    {
        return document.getElementById(el);
    }
}

</script>

loader.php - סתם קובץ שלוקח לו מלא זמן להטען (בשביל הבדיקה)

הדגמה:
http://downit.co.il/test/test.html

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

ניסיתי המון דברים וכיוונים ושום דבר לא הלך.
תודה.

**IgalSt** · 10-01-11, 20:38

לדעתי זו ההתנהגות הטבעית של הדפדפן.

אני יכול להציע 2 פתרונות:
הראשון הוא לבצע משלוח של הטופס בבאמצעות AJAX ואחרי שהטופס נשלח להעביר את הגולש לעמוד הרלוונטי.
הפתרון השני דומה לראשון אך יותר פשוט אם אתה לא מיומן ב-AJAX (אך פחות מומלץ): כל שעליך לעשות הוא ליצור iframe נסתר (display:none) וב-target של ה-FORM לתת את השם של ה-iframe הזה. ב-iframe תבצע העברת עמוד באמצעות JS פשוט.

BlueNosE · 11-01-11, 23:19

תנסה ליצור את התמונה בJavascript במקום בDOM, באמצעות createElement או אולי אפילו סתם כתיבה לDIV ריק.
תנסה לטעון את התמונה עם new Image() בטעינת הקוד.

10-01-11, 19:51	# 1
Tal. חבר מתקדם מיני פרופיל תאריך הצטרפות: Dec 2010 הודעות: 463	JS \| הצגת תמונת loading אחרי שליחת טופס. אני הרבה זמן שובר תראש ולא מצליח. אני צריך ליצור FORM פשוט כשיילחצו על הכפתור תוצג תמונה כזאת שזזה ויהיה רשום loading בניתי משהו די פשוט: קוד: <html> <div id="load" style="display: none;"> טוען.. אנא המתן <img src='/images/load.gif' /> </div> <form action="loader.php" onsubmit="return ray.ajax()"> <input type="submit"> </form> </html> <SCRIPT type="text/javascript"> var ray= { ajax:function(st) { this.show('load'); }, show:function(el) { this.getID(el).style.display=''; }, getID:function(el) { return document.getElementById(el); } } </script> loader.php - סתם קובץ שלוקח לו מלא זמן להטען (בשביל הבדיקה) הדגמה: http://downit.co.il/test/test.html בפיירפוק וכרום זה עובד מעולה. אבל באקספלורר כששולחים טופס הוא עוצר הכל כולל את התמונה. אז מה שקורה זה שהתמונה נתקעת וזה מאד מציק. ניסיתי המון דברים וכיוונים ושום דבר לא הלך. תודה.

10-01-11, 20:38	# 2
IgalSt מנהל פורום, עסק רשום מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: המרכז גיל: 38 הודעות: 1,432	לדעתי זו ההתנהגות הטבעית של הדפדפן. אני יכול להציע 2 פתרונות: הראשון הוא לבצע משלוח של הטופס בבאמצעות AJAX ואחרי שהטופס נשלח להעביר את הגולש לעמוד הרלוונטי. הפתרון השני דומה לראשון אך יותר פשוט אם אתה לא מיומן ב-AJAX (אך פחות מומלץ): כל שעליך לעשות הוא ליצור iframe נסתר (display:none) וב-target של ה-FORM לתת את השם של ה-iframe הזה. ב-iframe תבצע העברת עמוד באמצעות JS פשוט. __________________ יגאל סטקלוב Igal Steklov Slides מה השעה? טרקלין דן טרמינל 1

11-01-11, 23:19	# 3
BlueNosE אין כמו ב127.0.0.1 מיני פרופיל תאריך הצטרפות: Oct 2005 מיקום: כפ"ס גיל: 32 הודעות: 4,086	תנסה ליצור את התמונה בJavascript במקום בDOM, באמצעות createElement או אולי אפילו סתם כתיבה לDIV ריק. תנסה לטעון את התמונה עם new Image() בטעינת הקוד. __________________ עומר, admin [@] rely.co.il בניית אתרים Rely סלנג מילון סלנג utter


	ההרשמה לפורום נפתחה - אפשרות רישום לכל אימייל (דומיינים פרטיים, gmail, הוטמייל..)!

חברים פעילים הצופים באשכול זה: 1 (0 חברים ו- 1 אורחים)