Gif non animée

Version imprimable

Gif non animée

Bonjour à tous,
Je suis dans l'incompréhension sur un tout petit souci de design sans gravité :
Au clic sur un bouton, je lance l'exécution d'un traitement long (plusieurs minutes parfois).
Pour faire patienter l'utilisateur, j'affiche d'abord un Panel (avec un ModalPopupExtender) contenant un gif animé + un message.
Mon pb est que ce gif animé n'est pas animé. Et ce sur Firefox ou IE.
Seule surprise : ce gif est animé sur Safari, sur un Mac.
Voici mon code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
 
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
 
    <asp:Button Style="display: none" ID="ModalButtonPopUpTraitement" runat="server" CausesValidation="False"/>
 
    <ajaxtoolkit:modalpopupextender ID="ModalPopupExtenderTraitement" runat="server" BackgroundCssClass="modalBackground"
        PopupControlID="PanelTraitement" TargetControlID="ModalButtonPopUpTraitement" />
 
    <asp:Panel ID="PanelTraitement" runat="server"  BackgroundCssClass="modalPopup"
        BackColor="#E0E3E7" BorderColor="GhostWhite" BorderWidth="3" 
        Height="81px" Width="359px" CssClass="modalPopup">
        <table width="100%">
            <tr>
                <td>
                    &nbsp;</td>
                <td align="center">
                    <table style="width: 320px">
                        <tr>
                            <td align="right">
                                <asp:Image ID="ImageProcess" runat="server" alt="Traitement en cours..." 
                                    ImageUrl="~/Images/process_running.gif" Width="70px" />
                            </td>
                            <td>
                                &nbsp;</td>
                            <td align="left">
                                <asp:Label ID="LabelTraitementEnCours" runat="server" 
                                    Text="Le traitement peut prendre plusieurs minutes, merci de patienter."></asp:Label>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
    </asp:Panel>

Et voici comment j'appelle la popup depuis mon Page_Load :

Code:

1
2
 
ImageButtonAction.OnClientClick = "if(confirm('Vous allez exécuter le traitement ; ce processus peut demander plusieurs minutes. Continuer ?')) { $find('" + ModalPopupExtenderTraitement.ClientID + "').show();}";

Merci d'avance pour votre aide.

05/04/2012, 16h56
tomlev

Si tu ouvres l'image toute seule dans le navigateur, elle est bien animée ?
Poste l'image ici
05/04/2012, 17h15
TheReturnOfMuton

1 pièce(s) jointe(s)

Citation:

Envoyé par tomlev

Si tu ouvres l'image toute seule dans le navigateur, elle est bien animée ?
Poste l'image ici

Salut tomlev,
L'image tourne bien sur IE et FF, la voici :

Pièce jointe 92667
05/04/2012, 17h19
tomlev

Bizarre... tu peux montrer le code HTML généré par ta page ? (juste la partie qui contient l'image)

Voici la partie de la source qui nous intéresse :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
    <div id="ctl00_ContentPlaceHolderPagePrincipale_PanelTraitementRunning" class="modalPopup" BackgroundCssClass="modalPopup" style="background-color:#E0E3E7;border-color:GhostWhite;border-width:3px;border-style:solid;height:81px;width:359px;">
 
        <table width="100%">
            <tr>
                <td>
                    &nbsp;</td>
                <td align="center">
                    <table style="width: 320px">
                        <tr>
                            <td align="right">
                                <img id="ctl00_ContentPlaceHolderPagePrincipale_ImageProcess" alt="Traitement en cours..." src="Images/process_running.gif" style="width:70px;border-width:0px;" />
                            </td>
                            <td>
                                &nbsp;</td>
                            <td align="left">
                                <span id="ctl00_ContentPlaceHolderPagePrincipale_LabelTraitementEnCours">Le traitement peut prendre plusieurs minutes, merci de patienter.</span>
                                <span id="ctl00_ContentPlaceHolderPagePrincipale_LabelTraitementEchoue" style="color:Red;"></span>
                            </td>
                        </tr>
                    </table>
                </td>
                <td>
                    &nbsp;</td>
            </tr>
        </table>
 
</div>

05/04/2012, 17h41
tomlev

Bizarre, si je colle ce code dans une page HTML, ça tourne sans problème... c'est peut-être lié au fait que ce soit dans un popup :?
06/04/2012, 12h24
TheReturnOfMuton

Solution trouvée

Alors après plusieurs heures de tournage en rond, il se trouve que je n'avais pas la toute dernière version d'AjaxToolkit, et en plus il fallait encadrer mon panel et mon gif animé par un UpdatePanel.
Problème résolu, merci Tomlev.