[英]How to know when all content is loaded on the page from AJAX call?
Hopefully someone can help me out here. 希望有人可以在这里帮助我。
In my application I am making some quite large AJAX calls, getting HTML to drop into my page. 在我的应用程序中,我正在进行一些相当大的AJAX调用,使HTML可以放入我的页面中。 This HTML could contain up to 7 or 8 images.
该HTML最多可包含7或8张图片。
I am currently using AJAX like this: 我目前正在使用这样的AJAX:
$.ajax({
type: 'GET',
url: 'ajax-content/page.html'
}).done(function(data) {
$('#case_study').html('<div class="loading"></div>');
$('#case_study').append(data);
// EVERYTHING AFTER THIS POINT SHOULD ONLY RUN ONCE ALL CONTENT IS
// SUCCESSFULLY LOADED ON THE PAGE
$('#case_study').css("max-height", "3000px");
$('.loading').remove();
}).fail(function(data) {
console.log("FAIL");
console.log(data);
});
Now this all works fine, but, the code in .done
runs as soon as the server has responded with my HTML, this is great, but not exactly what I am looking for. 现在一切正常,但是
.done
的代码在服务器响应我的HTML后立即运行,这很好,但不完全是我想要的。
What I need to know is, after I have run $('#case_study').append(data)
when is all of the content actually visible to the user, when have all the images finished loading etc. 我需要知道的是,在我运行
$('#case_study').append(data)
何时所有内容实际上对用户可见,何时所有图像都完成加载等。
If anyone can help me work out how to do this that would be fantastic. 如果有人可以帮助我解决如何做到这一点,那就太好了。
Cheers. 干杯。
If you are only waiting for the images you could add an eventListener to the images and wait for them all the finished loading: 如果仅等待图像,则可以向图像添加一个eventListener,然后等待它们完成所有加载:
var index = 0;
$('img').on('load', function() {
index++;
if (index == $('img').length - 1) {
// show your content
}
});
Did you try the load function of jQuery? 您是否尝试过jQuery的加载功能?
$.ajax({
type: 'GET',
url: 'ajax-content/page.html'
}).done(function(data) {
$('#case_study').html('<div class="loading"></div>');
$('#case_study').append(data).load(function() {
$('#case_study').css("max-height", "3000px");
$('.loading').remove();
});
}).fail(function(data) {
console.log("FAIL");
console.log(data);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.