当前位置: 首页 > 面试题库 >

是否可以使用Ajax / jquery技术预加载页面内容?

郭星文
2023-03-14
问题内容

是否可以预加载所有页面内容(例如显示加载栏/动态gif
..或加载文本..),直到内容完全加载然后显示给用户/访问者为止?如果可以的话,您能给我一些指导或资源以实现这一目标。因为我能够轻松找到图像预加载器,但是我正在寻找一种预加载技术,该技术可以在显示之前预加载页面上的所有内容。


问题答案:

无需为此使用Ajax。只需将页面的包装器div设置为display即可none。然后将其更改为加载 文档block时。 __

使用普通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>

相关文档:Events / ready,Events /
load,CSS /
CSS和Core /
$



 类似资料:
  • 问题内容: 我的问题: 我有index.html: 是这样的: 问题很简单。 当我按下按钮时,我想动态加载内容,而无需刷新。 提前致谢!请发表评论以进行任何必要的澄清。 编辑,更详细的解释: 我不确定自己是否很清楚(或者我可能不了解我缺乏技术技能的答案),所以我再说一遍。(改写) 我有一个带有提交按钮的HTML,该按钮通过POST方法发送变量。 PHP文件使用此变量,并在经过一定过程后插入并更新M

  • 问题内容: 我正在建立一个新的由AJAX驱动的网站,其中包含不同的部分。每个部分都需要一组新的Javascript函数才能运行。我宁愿不要一开始就加载每个脚本,因为可能会有很多脚本。 有没有一种方法可以使用AJAX加载新脚本并删除旧脚本(以确保类似的变量名或函数签名不存在兼容性问题)。 谢谢 编辑 -jQuery很好,它不必是老式的Javascript 问题答案: 三件事: 1)是,您可以加载新脚

  • 问题内容: 有没有办法做到这一点? page1.php-有 index.php-有 我可以以某种方式从div内部的page1.php中获取数据并将其加载到index.php中的div中吗? 我已经使用css-tricks网址中提供的代码完成了此操作:http : //css- tricks.com/examples/DynamicPage/ 但这使用哈希更改事件。我不想使用哈希功能,而只想使用加载

  • 问题内容: 我们正在发出多个ajax请求,以“保存” Web应用程序中的数据,然后重新加载页面。我们遇到了这样一种情况:(由于请求是异步发出的)在ajax调用完成时或之前重新加载页面。一种简单的解决方案是使用“ async”:false选项启用ajax调用,从而强制进行同步调用。这似乎可行,但是在执行任何调用之前运行的对话框代码会延迟运行。 任何意见是极大的赞赏! 还应注意,在重新加载之前放置al

  • 问题内容: 我知道这是一个模糊的问题- 对此感到抱歉。如果我有一个在PHP和MySQL上运行的论坛,聊天室或类似的地方,用户可以在其中输入和提交数据,那么什么是最好的方式来使新提交的内容在提交后自动在页面上显示给所有用户? 如果您愿意,它很像实时新闻源…效果排序在这里适用于stackoverflow,当您回答问题时,系统会在您提交新答案时告知您。我想测试新提交的内容,然后自动显示它。 有什么建议?

  • 问题内容: 加载Angular应用后,我需要一些模板可以脱机使用。 这样的事情将是理想的: 问题答案: 有一个 模板缓存服务 :$ templateCache ,可用于在javascript模块中预加载模板。 例如,取自文档: 甚至还有一个艰巨的任务,可以从html文件中预先生成一个javascript模块:grunt-angular- templates 另一种可能不太灵活的方法是使用 内联模板