jquery - jquery 预加载通过 load() 方法加载的页面

Question

我正在尝试做一些像 boxy 或 facebox 或 lightbox 之类的东西......等等。唯一的问题是我不知道如何预加载通过 load() 方法加载到框中的页面。

它应该像这样工作：

1. 它弹出框
2. 添加了加载动画
3. 加载页面时动画消失

所以我需要知道何时加载页面以删除动画。

Answer 1

var function_for_display_animation = function(){
   //display animation
}
var function_for_remove_animation = function(){
   //remove animation
}

function_for_display_animation();
$(selector).load('page.php',function_for_remove_animation);

或者：

$().ajaxSend(function(evt, request, settings){
    //start animation
});

$().ajaxComplete(function(event,request, settings){
    //end animation
 });

$(selector).load('page.php', function(){
    //work
});

Answer 2

如果我对您的理解正确，您的意思是因为您网站上的页面需要一段时间才能加载，您希望友好的加载消息立即显示并在页面加载后消失。

这样做的诀窍是在页面首次加载时不会下载太多。只是加载消息和一些 JavaScript。

使这项工作有效的原因在于，在您的 $(document).ready() 函数中，您将使用 AJAX 来获取慢速数据。一旦 AJAX 查询返回，使用 JS 用数据填充页面，然后关闭加载消息。