Question

我希望有一个预加载的页面，直到正在访问的链接/页面的内容已满载。

这是我的代码

$( document ).ready(function() {
     $.ajax({
    method: 'GET',
    url: "pages/main.html",
    success: function(content)
    {
        $('#contentarea').html (content);
    }
});
    });



$('.menu_nav') .click (function () {
var href = $(this) .attr('href');
$('#contentarea').hide() .load(href).slideDown( 'very slow' )

    return false;
});

Answer 1

您可以使用$(document).ajaxStart().ajaxStop()：

 $(document).ajaxStart(function (){
     $('#contentarea').prev().append('<span>loading</span>');
 }).ajaxStop(function (){
    $('#contentarea').prev('span').remove();
 });

Answer 2

<强> CSS

#loader-wrapper{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 10000;
   background-color: #ffffff;
   opacity: 1;
 }

html 。将此div标记放在body标记的开头
下面

<div id="loader-wrapper"></div>

<强>的javascript

window.addEventListener("load",function(){
  var load_screen = document.getElementById("loader-wrapper");
  document.body.removeChild(load_screen);
});

如何制作预加载页面

2 个答案: