jQuery在加载每个单独的DIV与图像时的淡出
jQuery fadeIn when done loading each individual DIV with image?
我有一个网站,显示大量的图片。而不是显示他们,看着它加载,有没有一种方法,让它在加载完成后淡出?对jQuery和javascript的奇妙世界有点陌生。
现在我从PHP文件中获取数据,该文件调用mySQL服务器并获取最新的图像。它只是返回一大块HTML来显示:
// If the user clicks the logo
$("#logo").click(function() {
$("#right_bar_wrapper").animate({ height: 'toggle', opacity: 'toggle' }, '200');
var thePostData = "username=c";
$.ajax({
type: "POST",
url: "http://myflashpics.com/v2/process_newsfeed.php",
data: thePostData,
success: function(theRetrievedData) {
document.getElementById('right_bar_wrapper').innerHTML = theRetrievedData;
$("#right_bar_wrapper").fadeIn("200");
}
});
});
下面是包含每个图像的一个div的样子:
<div class='sidebar_image_box_newsfeed'>
<div class='sidebar_image_box_newsfeed_user_info makeProfileAppear' id='user_coultonvento'><img src='http://myflashpics.com/get_image.php?short_string=kmdp&size=thumbnail' />TheAmazingCoultoniusTheFourneeth...</div>
<img src='http://myflashpics.com/get_image.php?short_string=6v9o&size=big' id='image_6v9o' class='makePictureBig' style='width: 180px;' />
<div class='sidebar_image_box_newsfeed_user_info_comments' style='float: right; margin-top: -1px; margin-left: 20px; display: none;' id='bigpicture_comment_6v9o'>9</div>
<div class='sidebar_image_box_newsfeed_caption'>Usama bin laden? I believe that's a typo, Fox. </div>
<div class='sidebar_image_box_newsfeed_user_info_comments' id='littlepicture_comment_6v9o'>9</div>
<div style='clear: both;'></div>
</div><div class='sidebar_image_box_newsfeed'>
<div class='sidebar_image_box_newsfeed_user_info makeProfileAppear' id='user_BrandonVento'><img src='http://myflashpics.com/get_image.php?short_string=e4r7&size=thumbnail' />Brandon Vento</div>
<img src='http://myflashpics.com/get_image.php?short_string=o1sk&size=big' id='image_o1sk' class='makePictureBig' style='width: 180px;' />
<div class='sidebar_image_box_newsfeed_user_info_comments' style='float: right; margin-top: -1px; margin-left: 20px; display: none;' id='bigpicture_comment_o1sk'>9</div>
<div class='sidebar_image_box_newsfeed_caption'></div>
<div class='sidebar_image_box_newsfeed_user_info_comments' id='littlepicture_comment_o1sk'>9</div>
<div style='clear: both;'></div>
</div>
当然,它淡入,但用户看到它加载。
最好的方法是什么?
谢谢
Coulton
你可以使用jquery的image .load()函数来实现
$.ajax({
type: "POST",
url: "http://myflashpics.com/v2/process_newsfeed.php",
data: thePostData,
success: function(theRetrievedData) {
document.getElementById('right_bar_wrapper').innerHTML = theRetrievedData;
$("#right_bar_wrapper").fadeIn("200");
//here do some trick
$("#right_bar_wrapper img").load(function(){
$(this).fadeIn();
});
}
});
或者你可以使用live()来绑定动态img元素
加载style='display:none'的img标签,并绑定图像的Load()事件使其淡出。文档:http://api.jquery.com/load-event/
示例:$(".makePictureBig").live('load', function(){
$(this).fadeIn();
});
哦…使用load()
你可以在图片加载完成后执行一个函数(取消包含div的隐藏)。
看一下这个例子http://www.stoimen.com/blog/2009/08/05/jquery-check-whether-image-is-loaded/
首先,使用.load()代替ajax,因为使用
更简单然后,作为load()函数的回调,将fadeIn()绑定到load事件
$("#logo").click(function() {
$("#right_bar_wrapper")
.animate({ height: 'toggle', opacity: 'toggle' }, '200')
.load( "http://myflashpics.com/v2/process_newsfeed.php",
{"username" : "c"},
function() {
$(this).bind('load',function(){
$(this).fadeIn("200");
});
}
);
});
相关文章:
- 将Div滑出屏幕,而不是淡出
- 查找父DIV的ID并淡出DIV
- 交叉淡入淡出 DIV + 悬停时停止动画
- 当它可见时自动淡出 Div
- 循环访问一系列 DIV 并淡入/淡出
- 淡入,淡出 Div
- JQuery 淡入/淡出会导致其他 DIV 闪烁
- 淡入淡出并淡入下一个Div,并在其中设置子元素的动画
- Div不't在jQuery中完成后淡出
- 渐明,淡出DIV上循环工作良好-但不显示第一个DIV
- 淡出/淡出使DIV's堆叠而不是重叠?使用& # 39;绝对# 39;这不是一个解决方案
- 使用jQuery为DIV's淡出(小提琴)
- 添加动画到DIV淡出和淡入的动作事件
- Div won't淡出/淡入
- 在延迟后淡出并滑动的Div
- DIV淡出到另一个DIV
- 经过淡入/淡出循环的Div突然闪烁
- DIV淡出和位置
- DIV内容淡入/淡出混乱
- jQuery在加载每个单独的DIV与图像时的淡出