2

将外部页面拉入<div>. 我在内容填充时有一个加载图像，但是它很快就会消失（在内容加载之前），并且在内容加载之前有几秒钟的间隙。有什么建议么？

$(document).ready(function() { 
    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>";
    $("#page_1").click(function(e) {
        e.preventDefault(); 
        $("#content").html(ajax_load).load("page_1.html");
    });
    $("#page_2").click(function(e) {
        e.preventDefault(); 
        $("#content").html(ajax_load).load("page_2.html");
    });
});
4

6 回答 6

2

您可以使用 jQuery 让您的文档通过单独的处理程序了解 ajax 调用。然后你将只有一个地方来管理你的加载 gif 并让事物按照你想要的顺序出现和消失。

这是一个 jsfiddle 演示。

在您的示例中使用类似于：

$(document).ready(function() {

    // removed your .html(ajax_load) in these
    $("#page_1").click(function(e) {
        e.preventDefault(); 
        $("#content").load("page_1.html");
    });
    $("#page_2").click(function(e) {
        e.preventDefault(); 
        $("#content").load("page_2.html");
    });

    // handlers for ajax events.
    // just make a hidden container with your loader in it and this will show/hide as necessary
    $(document).ajaxStart(function() {
        $(".ajax-load-container").show();
    }).ajaxComplete(function() {
        $(".ajax-load-container").hide();
    });
});
于 2013-07-10T20:51:45.717 回答
0

你不能指望计数器，因为一切都可能发生，计数器可能会过早结束。我看不到您删除加载图像的确切位置。我想它应该在 .html 文件中的某个地方。但是正如你所说，有 ajax 调用，它会在页面加载后完成，所以会有一个间隙，正如你所说的那样。如果您所有的 ajax 调用都相互依赖，则将它们嵌套并从最后一个调用中删除加载。这样，您将确保所有内容都已加载。但更有可能的是这些 ajax 调用是独立的。然后你可以做计数器。每次当一些 ajax 调用准备好时，你都会增加计数器。当计数器等于您的 ajax 调用次数时，您将删除加载图像。

于 2013-07-10T20:42:22.400 回答
0

试试下面，让我知道：

$(document).ready(function() { 
//    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>";
        var img = new Image();
        img.className = 'loading';
        img='img/loader_large.gif';
    img.onload = function(){
      $("#page_1").click(function(e) {
        e.preventDefault(); 

       // $("#content").html(ajax_load).load("page_1.html");
        $("#content").append(img).load("page_1.html");
      });
      $("#page_2").click(function(e) {
        e.preventDefault(); 
       // $("#content").html(ajax_load).load("page_2.html");
        $("#content").append(img).load("page_2.html");
      });
    }
});
于 2013-07-10T20:41:08.280 回答
0

感谢大家的意见，学习了一些新的方法，所以谢谢。我最终从加载 instagram 数据的 .js 文件加载。这种方式最有效，而且非常简单，我猜我已经醒太久了（过度思考）。

以下是我如何实现它的示例：

$.ajax({
dataType:'jsonp',
url:url,    
beforeSend:function(){ $('.loader').html("<img src='img/loader_large.gif'/>");},
complete:function(){ $('.loader').html(""); }
});
};

CSS

 .loader { text-align:center; }

HTML

<div class="loader"></div>
于 2013-07-10T23:19:13.713 回答
0

我会将隐藏的图像放入#content元素中

    <div id="content"><img class='loading' style="display:none" src='img/loader_large.gif'/></div>

假设您的内容是 div

并使用ajaxStartandajaxStop隐藏和显示它。

     $(document).ajaxStart(function () {
            $('.loading').show();
        });
        $(document).ajaxStop(function () {
            $('.loading').hide();
        });
于 2013-07-10T20:41:44.657 回答
-1

您可以将内容加载到隐藏的 div 中，然后用它替换 #content 吗？

像这样的东西：

$(function()
{ 
    var ajax_load = "<img class='loading' src='img/loader_large.gif'/>";

    $("#page_1").click(function(e)
    {
        e.preventDefault(); 
        $("#content").html(ajax_load);
        var content = $('<div />').load("page_1.html");
        $('#content').html(content.html());
    });

    $("#page_2").click(function(e)
    {
        e.preventDefault(); 
        $("#content").html(ajax_load);
        var content = $('<div />').load("page_2.html");
        $('#content').html(content.html());
    });
});
于 2013-07-10T20:24:04.433 回答