dsgft1486
2013-01-29 15:53
浏览 102

页面加载GIF - 有人可以解释下面的答案吗?

I found what I was looking for on this link How to show ajax loading gif animation while the page is loading? but I dont know how to implement this on my website.

I want a loading GIF to appear while the page loads and disappears by itself once the page is completely loaded with PHP results.

On the website I use one page template (index.php) and I have all data loaded in that page dynamically according to the user's query.

Thank you in advance.

图片转代码服务由CSDN问答提供 功能建议

我在这个链接上找到了我要找的东西如何在页面加载时显示ajax加载gif动画?但我不知道如何 在我的网站上实现这一点。

我希望在页面加载时出现加载GIF ,并在页面完全加载PHP结果后自动消失。

在网站上我使用一个页面模板(index.php),我根据用户的查询动态加载了该页面中的所有数据。

提前谢谢你。

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • doumi1099 2013-01-30 17:51
    已采纳

    Well, this is my solution.

    1) CSS part

    #loadgif {
        padding-top:2px;
        font: 10px #000;
        text-align:center;
        vertical-align:text-top;
    
        height: 80px;
        width: 130px;
    
        /* Centering the div to fit any screen resolution */
        top: 50%;
        left: 50%;
        margin-top: -41px; /* Div height divided by 2 including top padding */
        margin-left: -65px; /* Div width divided by 2 */
        position: absolute;
        display:    none; /* JS will change it to block display */
        position:   fixed;
        z-index:    1000;
    
        /* Loading GIF set as background of the div */
        background: #FFF url('../img/loader.gif') 50% 75% no-repeat;
    
        /* Misc decoration */
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        border:#7580a8 solid 1px;
    }
    

    2) HTML part

    Place div tag within body tag anywhere.

    <!-- With or without text -->
    <div id="loadgif">Loading...</div>
    

    3) Javascript part

    I made two functions, one to show and another to hide the div.

    <script type="text/javascript">
    
    // Hide function by changing <div> style display attribute back to none
    function hideloadgif() {
        document.getElementById('loadgif').style.display = 'none';
    }
    
    // Show function by changing <div> style display attribute from none to block.
    function showloadgif() {
        document.getElementById('loadgif').style.display = 'block';
    }
    
    // Making sure that any other event running in the background isn't affected
    if (window.addEventListener) { // Mozilla, Netscape, Firefox
        window.addEventListener('load', WindowLoad, false);
    } else if (window.attachEvent) { // IE
        window.attachEvent('onload', WindowLoad);
    }
    
    // Call the hideloadgif() function on click event,
    // with interval time set to 3 seconds to hide the <div>
    function WindowLoad(click) {
        setInterval("hideloadgif()",3000)
    }
    </script>
    

    4) Showing the div. Call function showloadgif() using onlick="" event anywhere.

    For example

    <img src="abc/def.jpg" onlick="showloadgif()">
    

    Once the image is clicked, the div will appear and at the same time, hideloadgif() will trigger and hides the div within 3 seconds.

    function WindowLoad(click) {
        setInterval("hideloadgif()",3000)
    }
    
    已采纳该答案
    打赏 评论
  • douzhongju8780 2013-01-29 17:21

    You will find everything you need here

    http://mycodeprograms.blogspot.ca/2012/10/how-to-add-loader-while-page-load.html
    
    打赏 评论
  • doutan5798 2013-01-29 17:57

    When the page is completely loaded, the first thing that happens is the <body>'s onload event fires. This is where you make the image disappear.

    For example, make the <body> tag look like this:

    <body onload="makeLoadingGifDisappear()">
    

    Somewhere in the page body give your GIF an ID:

    <img src="loadinggif.gif" id="myLoadingGif">
    

    Then in the page's JavaScript, make the makeLoadingGifDisappear function hide the GIF:

    function makeLoadingGifDisappear() {
     document.getElementById('myLoadingGif').style.display = 'none';
    }
    
    打赏 评论

相关推荐 更多相似问题