this seems to be hundred times answered question, but I can't find a working solution.
这似乎是百遍回答的问题，但我找不到一个有效的解决方案。
I've got this code:
我有这个代码：
<script>
$("#content div").hide();
$("#loader").show();
$("#content div").load("file.html", function () {
$("#loader").fadeOut('slow', function() {
$("#content div").fadeIn('slow');
});
});
</script>
<html>
<div id="content">
<div></div>
<img src="loader.gif" />
</div>
</html>
As far as I'm concerned the stuff that is inside the load function should happen after the file.html is loaded, but it hides the loader image and shows content div (in this case huge image, but it can be anything) and it still loads this content - the loading process is not finished. Thanks.
至于我担心加载函数内部的东西应该在加载file.html之后发生，但它隐藏了加载器图像并显示内容div（在这种情况下是巨大的图像，但它可以是任何东西）并且它仍然加载此内容 - 加载过程尚未完成。谢谢。
3 个解决方案
#1
0
I use the following library. I don't remember where I took it from.
我使用以下库。我不记得从哪里拿走它。
/* Image loader */
function addListener(element, type, expression, bubbling) {
bubbling = bubbling || false;
if (window.addEventListener) { // Standard
element.addEventListener(type, expression, bubbling);
return true;
} else if (window.attachEvent) { // IE
element.attachEvent('on' + type, expression);
return true;
} else return false;
}
var ImageLoader = function (url) {
this.url = url;
this.image = null;
this.loadEvent = null;
};
ImageLoader.prototype = {
load: function () {
this.image = document.createElement('img');
var url = this.url;
var image = this.image;
var loadEvent = this.loadEvent;
addListener(this.image, 'load', function (e) {
if (loadEvent != null) {
loadEvent(url, image);
}
}, false);
this.image.src = this.url;
},
getImage: function () {
return this.image;
}
};
/* End of image loader */
Include the above script. Then you can simply use it as follows.
包括上面的脚本。然后你可以简单地使用它如下。
var loader = new ImageLoader("/Path/MyImage.jpg");
// define your 'onreadystatechange'
loader.loadEvent = function(url, imageAsDom) {
// do what you need
}
loader.load();
#2
3
Description
Because .load() uses ajax, the right way to display a "loading" indicator is to use jQuery's ajaxStart and ajaxComplete events.
因为.load（）使用ajax，显示“加载”指示符的正确方法是使用jQuery的ajaxStart和ajaxComplete事件。
jQuery.ajaxStart() Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
jQuery.ajaxStart（）注册第一个Ajax请求开始时要调用的处理程序。这是一个Ajax事件。
jQuery.ajaxComplete() Register a handler to be called when Ajax requests complete. This is an Ajax Event.
jQuery.ajaxComplete（）注册Ajax请求完成时要调用的处理程序。这是一个Ajax事件。
Sample
$(document).ajaxStart(function() {
$("#loader").show();
});
$(document).ajaxComplete(function() {
$("#loader").fadeOut('slow');
});
More Information
- jQuery.ajaxStart()
- jQuery.ajaxStart（）
- jQuery.ajaxComplete()
- jQuery.ajaxComplete（）
#3
0
Loader needed to be an id but this is better way to format your code.
Loader需要是id，但这是格式化代码的更好方法。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#content div").hide();
$("#loader").show();
$("#content div").load("file.html", function () {
$("#loader").fadeOut('slow', function() {
$("#content").fadeIn('slow');
});
});
});
</script>
</head>
<div id="wrapper">
<img id="loader" src="loader.gif" />
<div id="content"></div>
</div>
</html>
#1
0
I use the following library. I don't remember where I took it from.
我使用以下库。我不记得从哪里拿走它。
/* Image loader */
function addListener(element, type, expression, bubbling) {
bubbling = bubbling || false;
if (window.addEventListener) { // Standard
element.addEventListener(type, expression, bubbling);
return true;
} else if (window.attachEvent) { // IE
element.attachEvent('on' + type, expression);
return true;
} else return false;
}
var ImageLoader = function (url) {
this.url = url;
this.image = null;
this.loadEvent = null;
};
ImageLoader.prototype = {
load: function () {
this.image = document.createElement('img');
var url = this.url;
var image = this.image;
var loadEvent = this.loadEvent;
addListener(this.image, 'load', function (e) {
if (loadEvent != null) {
loadEvent(url, image);
}
}, false);
this.image.src = this.url;
},
getImage: function () {
return this.image;
}
};
/* End of image loader */
Include the above script. Then you can simply use it as follows.
包括上面的脚本。然后你可以简单地使用它如下。
var loader = new ImageLoader("/Path/MyImage.jpg");
// define your 'onreadystatechange'
loader.loadEvent = function(url, imageAsDom) {
// do what you need
}
loader.load();
#2
3
Description
Because .load() uses ajax, the right way to display a "loading" indicator is to use jQuery's ajaxStart and ajaxComplete events.
因为.load（）使用ajax，显示“加载”指示符的正确方法是使用jQuery的ajaxStart和ajaxComplete事件。
jQuery.ajaxStart() Register a handler to be called when the first Ajax request begins. This is an Ajax Event.
jQuery.ajaxStart（）注册第一个Ajax请求开始时要调用的处理程序。这是一个Ajax事件。
jQuery.ajaxComplete() Register a handler to be called when Ajax requests complete. This is an Ajax Event.
jQuery.ajaxComplete（）注册Ajax请求完成时要调用的处理程序。这是一个Ajax事件。
Sample
$(document).ajaxStart(function() {
$("#loader").show();
});
$(document).ajaxComplete(function() {
$("#loader").fadeOut('slow');
});
More Information
- jQuery.ajaxStart()
- jQuery.ajaxStart（）
- jQuery.ajaxComplete()
- jQuery.ajaxComplete（）
#3
0
Loader needed to be an id but this is better way to format your code.
Loader需要是id，但这是格式化代码的更好方法。
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#content div").hide();
$("#loader").show();
$("#content div").load("file.html", function () {
$("#loader").fadeOut('slow', function() {
$("#content").fadeIn('slow');
});
});
});
</script>
</head>
<div id="wrapper">
<img id="loader" src="loader.gif" />
<div id="content"></div>
</div>
</html>