如何检查ajax .load调用是否已加载

Consider the following code:

考虑下面的代码:

var loadingHTML = $("<div style='width:100%;'> <h1>Loading...</h1></div>");
loadingHTML.hide();
$(".row").append(loadingHTML);
loadingHTML.fadeIn('slow');
$(".row").append($("<div>").load("get-more-images.php?start=36&end=36"));
//  loadingHTML.hide();

I have a page of images, and will fire this when the user scrolls down the page to load more images as they scroll down. The hope is to display "Loading.." until the image have appeared, then hide it again, running the above code will show then hide the text so fast you cannot see it, is there a way to check wether the .load event has finished?

我有一个图片页面，当用户向下滚动页面以加载更多图片时，我将启动这个页面。希望显示“load ..”直到图像出现，然后再次隐藏它，运行上面的代码将显示然后隐藏文本如此之快以至于你看不到它，是否有办法检查.load事件是否已经完成?

2 个解决方案

#1

Give the load a callback and execute whatever you want.

给加载一个回调并执行任何您想要的。

$(".row").append($("<div>").load("get-more-images.php?start=36&end=36", function () {
    console.log('load complete');
}));

More info - http://api.jquery.com/load/

更多信息——http://api.jquery.com/load/

#2

You can use a callback function:

您可以使用回调函数:

var loadingHTML = $("<div style='width:100%;'> <h1>Loading...</h1></div>");
loadingHTML.hide();
$(".row").append(loadingHTML);
loadingHTML.fadeIn('slow');
$(".row").append($("<div>").load("get-more-images.php?start=36&end=36"), function() {
  console.log("images load");
});

In docs you can check parameters it takes:

在文档中，你可以检查它所需要的参数:

.load( url [, data ] [, complete ] )

.load(url [， data] [， complete])

url Type: String A string containing the URL to which the request is sent.

url类型:字符串，包含发送请求的url。

data Type: PlainObject or String A plain object or string that is sent to the server with the request. complete Type:

数据类型:明文对象或字符串，与请求一起发送到服务器的普通对象或字符串。完整的类型:

Function ( String responseText, String textStatus, jqXHR jqXHR ) A callback function that is executed when the request completes.

函数(String responseText, String textStatus, jqXHR jqXHR)在请求完成时执行的回调函数。

References

参考文献

.load()

#1