Question

面对一个小问题。我将外部页面拉入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");
    });
});

Answer 1

您可以使用jQuery通过单独的处理程序使您的文档了解ajax调用。那么你只需要一个地方来管理你的加载gif并按照你想要的顺序显示和消失。

Here is a jsfiddle demo

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

$(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();
    });
});

Answer 2

尝试下面的内容并告诉我：

$(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");
      });
    }
});

Answer 3

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

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

假设您的内容是div

并使用ajaxStart和ajaxStop隐藏并显示它。

     $(document).ajaxStart(function () {
            $('.loading').show();
        });
        $(document).ajaxStop(function () {
            $('.loading').hide();
        });

Answer 4

你不能指望柜台，因为一切都可能发生，柜台可能会很快完成。我无法确定您正在删除加载图像的确切位置。我想它应该是.html文件中的某个地方。但正如你所说，有一个ajax调用，它将在页面加载后完成，因此会有一个空白，正如你再次说的那样。如果所有的ajax调用都相互依赖，那么将它们嵌套并从最后一个中删除加载。通过这种方式，您将确保加载所有内容。但这些ajax调用更可能是独立的。然后你可以做反击。每当某个ajax调用准备就绪时，您将增加计数器。当计数器等于您的ajax调用次数时，您将删除加载图像。

Answer 5

感谢大家的投入，了解了一些新方法，谢谢。我最终从加载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>

Answer 6

您可以将内容加载到隐藏的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());
    });
});

加载图片过早消失

6 个答案: