是否有可能用ajax / jquery预加载页面内容?

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (128)

是否有可能用ajax / jquery预加载页面内容?

提问于
用户回答回答于

没有必要为此使用Ajax。只需将页面的divdisplay设置none。然后将其更改block

代码可能如下所示,使用vanilla javascript:

<script type="text/javascript">
    function preloader() {
        document.getElementById("preloader").style.display = "none";
        document.getElementById("container").style.display = "block";
    }

    window.onload = preloader;
</script>

<style>
div#wrapper {
    display: none;
}

div#preloader {             
    top: 0; right: 10px;
    position:absolute;
    z-index:1000;
    width: 132px; height: 38px;
    background: url(path/to/preloaderBg.png) no-repeat;
    cursor: wait;
    text-shadow: 0px 1px 0px #fefefe;  //webkit                 
}
</style>

<body>
    <div id="preloader">Loading... Please Wait.</div>
    <div id="wrapper">
        <!-- page contents goes here -->
    </div>
</body>

在jQuery中:

<script type="text/javascript">
    // Use $(window).load(fn) if you need to load "all" page content including images, frames, etc.
    $(document).ready(function(){ 
        $("#preloader").hide();
        $("#container").show();
    });
</script>
用户回答回答于

如果选择隐藏内容直到整个页面加载的方法,则不要将其隐藏在CSS中,然后在JavaScript中不隐藏。如果你这样做,JavaScript禁用或不可用的任何人都不会得到任何页面。相反,既要隐藏脚本,也要显示脚本。

<body>
    <script type="text/javascript">
        document.body.style.visibility= 'hidden';
        window.onload= function() { document.body.style.visibility= 'visible'; };
    </script>

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动