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

- פורום תיכנות (https://hosts.co.il/forums/forumdisplay.php?f=14)

- - JS | הצגת תמונת loading אחרי שליחת טופס. (https://hosts.co.il/forums/showthread.php?t=87348)

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

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

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

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

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

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