Problem loading a.gif file while updating the php page?

Asked

Viewed 115 times

1

I have a problem in my code to load a gif when updating a page gif until it appears more does not come out is running straight. Can someone help me?

Here is my javascript:

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

here’s my 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>

here is my 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>
javascript jquery html css

  • Friend, your code appears to be correct. Check your browser console (F12 Console) for javascript errors. One of the possible problems is that jquery is not being referenced.

  • As @Joaopaulo said, it seems that everything is ok in the code, you tested in more than one browser?

1 answer

1

Apparently the problem is that when the GIF is displayed it has to be loaded and the page elements as well. Then the browser crashes and the GIF is not animated in a fluid way. What you can do is give more time for the GIF animate. who knows...

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

This will make you wait one more second after everything is already loaded and in this time GIF will animate.

javascript

Browser other questions tagged javascript jquery html css

You are not signed in. Login or sign up in order to post.