Question

这是我们的简单代码

<div class="user_side">
<a href="#" class="button white" id="profile">Profile</a>
<a href="#" class="button white" id="listing">Listing</a>
</div>

然后我们有一个容器：

<div id="contentdiv" style="width: 760px; height: 440px;">
</div>

和jquery：

 $("#profile").click(function(){
    $("#contentdiv").load("content.php?id=<? echo $uid; ?>&show=profile");
 });

 $("#listing").click(function(){
    $("#contentdiv").load("content.php?id=<? echo $uid; ?>&show=listing");
 });

当点击其中一个菜单图标时，我们需要在容器内显示loader.gif。什么是最好的方法。我们只需指出容器是透明的，默认情况下不应显示任何内容。

感谢。

Answer 1

创建一个名为loader的css类，只需在将load用于容器内容之前附加该元素。

$("#profile").click(function() {
    var element = $("#contentdiv");

    element.html('<div class="loader"></div>');
    element.load("content.php?id=<? echo $uid; ?>&show=profile");
});

其他方法是使用display: none;在yout代码中创建loader div，并使用show()和hide()重用加载器。像这样：

$("#profile").click(function() {
    var loader = $(".loader").show();

    $("#contentdiv").load("content.php?id=<? echo $uid; ?>&show=profile", function() {
        loader.hide();
    });
});

Answer 2

也许在内容中添加img loader img并在load函数中添加回调函数。加载结束时，将执行回调函数。

<div id="contentdiv" style="width: 760px; height: 440px;">
    <img id="loader" src="load.gif">
</div>

$("#profile").click(function(){
    $("#loader").show();
    $("#contentdiv").load("content.php?id=<? echo $uid;?>&show=profile", function() {
        $("#loader").hide();
    });
});

jquery show加载时在容器中加载gif

2 个答案: