1

Estou com um problema no meu código para carregar um gif ao atualizar uma pagina o gif até aparece mais não sai fica rodando direto. Alguém pode me ajudar?

Aqui está meu javascript:

<script>
     $(document).ready(function(){
            $("#loadimg").fadeOut("slow");
        });
</script>

aqui esta meu css:

 <style>
        #loadimg {
            position: absolute;
            left: 0px;
            top:0px;
            margin:0px;
            width: 100%;
            height: 100%;
            display:block;
            z-index: 9999997;
            opacity: 0.65;
            -moz-opacity: 0.65;
            filter: alpha(opacity = 65);
            background: black;
            background-image: url("../images/loaders/ajax-loader.gif");
            background-repeat: no-repeat;
            background-position:50% 50%;
            text-align: center;
            overflow: hidden;
            font-weight: bold;
            color: white;
            padding: 2%;
        }
        #TablaForm{
            margin-top: 100px;
        }
        label{
            font-size: 20px;
        }
        .titulo{
            font-size: 20px;
        }

        table{
            width:600px;
            height:300px;
            padding: 10px;
        }

        #fileToUpload{
            width:300px;
        }

        #typeFile{
            width:300px;
        }

    </style> 

aqui está meu html:

<body onLoad="init(); document.getElementById('typeFile').focus();">
<div id="loadimg" class='center' align="center" style="position:absolute; width:100%; height: 100%; text-align:center; background-color:rgba(0,0,0,0.4);">
    <br><br><br><br><br><br><br><br><br>
    <img src="img/ajax-loader.gif" width="200px" height="200px"  border=0 >
</div>


<div id="conteudo">
<div class="tabcontentstyle" style="WIDTH: 100%">
    <div id="tcontent1" class="tabcontent">
        <center>
<form action="update_yield.php" method="post" enctype="multipart/form-data">

    <table id='TablaForm'>
        <tr>
           <td colspan="2" align="center" class="titulo">Form Upload Files</td>
        </tr>
        <tr>
            <td>
               <label for='Rate'>File Type</label>
            </td>
            <td>
                <select name='typeFile' id='typeFile' class='typeFile'>
                    <option value='1' selected>WEEK REPORT [WEEK.xls]</option>
                    <option value='2'>WEEK REPORT [WEEK.csv]</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>
               <label for='file'>File</label>
            </td>
            <td>
                <input  type="file" name="fileToUpload" id="fileToUpload" />
            </td>
        </tr>
        <tr>
            <td>
               <label for='submit'>Send</label>
            </td>
            <td>
                <input type="submit" value="Upload" id='submit' class='submit' name="submit">
            </td>
        </tr>
    </table>

</form>
</center>
</div>
</div>
</div>
</body>
</html>
2
  • Amigo, o seu código aparentemente está correto. Verifique no console do navegador (F12 aba Console) se existem erros de javascript. Um dos possíveis problemas é o jquery não estar sendo referenciado.
    – Joao Paulo
    16/05/2016 às 20:16
  • Como o @JoaoPaulo disse, parece que está tudo ok no código, você testou em mais de um browser?
    – wmarquardt
    17/05/2016 às 1:09

1 Resposta 1

1

Pelo visto o problema é que quando o GIF é exibido ele tem que ser carregado e os elementos da página também. Então o navegador dá umas travadas e o GIF não fica animado de forma fluida. O que você pode fazer é dar mais um tempo para o GIF animar. quem sabe...

<script>
    $(document).ready(function(){
        setTimeout(function() { $("#loadimg").fadeOut("slow"); }, 1000);
    });
</script>

Isso vai fazer com que se espere mais um segundo depois que tudo já estiver carregado e neste tempo o GIF vai animar.

javascript

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .