如何加载内容(包括内容的图像),然后淡入
How to load a content (include content's images) and then fadein?
为什么加载了内容,但图像仍在加载?如何加载内容(包括内容的图像)然后淡入?
.js
$(document).ready(function(){
$('#contents').fadeOut('slow', function(){
$(this).load("url", {}, function(){
$("#contents").fadeIn('slow', function(){
alert('Faded in!');
});
});
});
});
这不是那么简单。 您需要将加载处理程序加载到动态加载的图像上,但是如果不修改源HTML,则在它们开始加载之前无法执行此操作,这使得它变得更加复杂,因为有些实际上可能会在您检查之前完成。 因此,您可以执行类似操作,以获取动态加载内容中的所有图像对象,然后检查每个对象以查看是否已完成加载。 如果它还没有完成加载,那么就会安装一个 onload 处理程序,以便我们可以计算最后一个完成加载的时间。 当所有加载完成后,我们可以执行fadeIn()
:
$(document).ready(function(){
$('#contents').fadeOut('slow', function(){
var self = $(this);
function fadeIn() {
$("#contents").fadeIn('slow', function(){
alert('Faded in!');
});
}
self.load("url", {}, function() {
var imgs = self.find("img");
var imgsRemaining = imgs.length;
imgs.each(function() {
// if the image isn't already loaded, then attach an onload handler
if (!img.complete || !this.height || !this.width) {
this.onload = this.onerror = this.onabort = function() {
// decrement imgsRemaining
--imgsRemaining;
// if no more images to finish loading, then start the fade
if (imgsRemaining == 0) {
fadeIn();
}
});
} else {
// this image already loaded
--imgsRemaining;
}
});
// if there were no images that weren't loaded yet
if (imgsRemaining == 0) {
fadeIn();
}
});
});
});
或者,对于解决问题的更通用的方法,这里有一个通用的 jQuery 方法,该方法加载内容,然后在内容和内容中的所有图像都完成加载时调用回调。 这将更具可重用性,并且可能会使您的代码更具可读性。 你使用它就像.load(url, data, fn) method
一样:
jQuery.fn.loadComplete = function(url, data, fn) {
// check if optional data argument is missing
if (typeof data == "function") {
fn = data;
data = {};
}
// dynamically load the content
this.load(url, data, function() {
var self = this;
// when content is parsed, check to see when all images are loaded
var imgs = $(this).find("img");
var imgsRemaining = imgs.length;
imgs.each(function() {
if (this.complete) {
// if image is already loaded, just decrement the count
--imgsRemaining;
} else {
// image not loaded yet, install onload handler
this.onload = this.onerror = this.onabort = function() {
// when img has finished loading, check to see if all images are now loaded
if (--imgsRemaining == 0) {
fn.call(self);
}
};
}
});
if (imgsRemaining == 0) {
fn.call(self);
}
});
}
因此,使用这种新方法,您的代码将是这样的:
$(document).ready(function(){
$('#contents').fadeOut('slow', function(){
$(this).loadComplete("url", {}, function(){
$("#contents").fadeIn('slow', function(){
alert('Faded in!');
});
});
});
});
相关文章:
- JS-移动图像,暂停设置的时间,然后将图像向后移动
- 先加载特定的图像,然后再加载页面的其余部分
- Pinterest 扩展如何存储(临时)网页中的图像,然后在 iframe 中访问它们
- 单击时预置图像 - 仅预置一次,然后停止
- 单击从一张图像切换到两张图像,然后再切换回一张图像
- 将普通的 PNG 图像转换为 JSON 数据,然后存储到对象
- 将图像输出到浏览器,然后再将其保存到文件夹
- 图像的尺寸,然后检查标准
- 在html画布中显示一个图像,然后增大其大小
- 在首页动画化一个标志3秒钟,然后显示一个图像滑块
- 在上传之前预览图像,然后以aspmvc上传到服务器
- 如何在后台加载图像,然后在完成后显示页面
- 将生成的随机数存储在变量中,然后将该变量作为文件名调用以显示图像.Javascript
- 如何检测移动浏览器(PHP/Javascript),然后进行图像/文本更改
- 在一个简单的jquery幻灯片中,我的类到达图像的末尾,然后从DOM的边缘掉下来
- JavaScript:从javascript加载图像,然后等待该图像的“load”事件
- 如何获取页面上所有图像的来源,然后将它们全部放在一个分区中
- 如何使用画布更改图像的不透明度,然后将其加载到画布中的另一个图像上?-HTML
- 当缩放浏览器窗口到给定的浏览器窗口宽度时,向下裁剪图像.然后让图像的其余部分响应
- jQuery在悬停时更改图像(然后返回到初始图像)