Question

我一直在搜索，似乎找不到关于如何在点击我网站上的链接时转换页面的好教程。我希望能够在单击链接时淡出页面并显示预加载。预加载完成后，新页面将会淡入。以下是我所谈论的一个示例http://www.admirhadzic.com

任何帮助都会很棒。

预载

 <div id="preloader">
     <div id="status">&nbsp;</div>
 </div>

脚本

    $(window).load(function() { // makes sure the whole site is loaded
        $("#status").fadeOut(); // will first fade out the loading animation
        $("#preloader").delay(350).fadeOut("slow"); // will fade out the white DIV that covers the website.
    })

CSS

 #preloader {
        position:absolute;
        top:0;
        left:0;
        right:0;
        bottom:0;
        background-color:#fff; /* change if the mask should have another color then white */
        z-index:99; /* makes sure it stays on top */
 }

 #status {
        width:200px;
        height:200px;
        position:absolute;
        left:50%; /* centers the loading animation horizontally one the screen */
         top:50%; /* centers the loading animation vertically one the screen */
         background-image:url(../img/status.gif); /* path to your loading animation */
         background-repeat:no-repeat;
         background-position:center;
         margin:-100px 0 0 -100px; /* is width and height divided by two */
 }

Answer 1

您的示例http://www.admirhadzic.com/中引用的网站似乎使用的是AngularJS或类似框架。也就是说，该网站包含在一个页面上，因此您永远不会得到＆＃34;白色闪光＆＃34; （在评论中提到）从导航到另一页。

在不更改应用程序框架的情况下，您可以使用ajax请求异步获取新页面内容。成功时，ajax方法可以替换您网页的内容，并完全按照您在$(window).onload()功能中执行的操作。

例如：

function LinkClick(){

  // load the waiting image and back-drop
  $("#preloader").fadeIn();
  $("#status").fadeIn();

  // kick off the ajax request for the new content
  $("#div-to-be-replaced").load("ajax/page-you-want-to-show.html", function(){
    $("#status").fadeOut();
    $("#preloader").fadeOut;
  });
}

您可以使用jQuery.ajax（）以及其他许多函数执行相同的操作。请参阅http://api.jquery.com/load/和http://api.jquery.com/jquery.ajax/。

使用预加载器进行页面转换

1 个答案: