Question

我正在将另一个页面和特定div (#hottel-list) (Rezults2.php)的一些内容加载到div（＃hotel-list）上的当前页面（Main.php）中。

在Main.php页面上我有：

 <div id="hotel-list" class="hotel-list listing-style3 hotel">
   Here goes the content loaded by jQuery AJAX load[]
 </div>

jQuery AJAX load（）代码是：

var datastring = location.search; // now you can update this var and use
$("#hotel-list").load("Rezults2.php" + datastring + " #hotel-list> *");

我的问题：如何在加载内容之前设置加载图像

有任何想法吗？

Answer 1

<强> HTML：

 <img src="loading.gif" class="loading" />

<强> Jquery的：

    $('.loading').show();//for an instance I assume you have some event predefined on the top *onclick* or *something else* 
    var datastring = location.search;
    $("#hotel-list").load("Rezults2.php" + datastring + " #hotel-list> *",function()
    {
       alert( "Load was performed." );
       $('.loading').hide();
    });

<强> CSS：

.loading
{
display:none;
}

说明：你需要加载默认隐藏的加载图片..然后你可以在我们的代码中看到图像显示，加载数据后我们隐藏加载图像简单！

Answer 2

var datastring = location.search; // now you can update this var and use
// load your image on starting load
$("#hotel-list").load("Rezults2.php" + datastring + " #hotel-list> *", function() {
    // callback after load is complete
});

设置一个加载gif，直到AJAX加载项目

2 个答案: