我正在尝试将图像加载到具有淡入效果的 div 中。问题是我不知道如何同时避免加载和褪色。我希望加载图像,并且在完全加载后它应该淡入。
http://www.izrada-weba.com/vedranmarketic
这些是图像缩略图:
<div id="thumbs">
<a href="#" class="slika_thumb" id="1"><img src="slike/th.jpg" border="0"/></a><a href="#" class="slika_thumb" id="2"><img src="slike/th.jpg" border="0"/></a><a href="#" class="slika_thumb" id="3"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a> </div>
</div>
这是应该加载图像的容器:
<div id="desna_kolona">
<div id="slika"><img src="slike/c6.jpg" /></div>
</div>
这是 jquery 文件:
$(document).ready(function(){
$('.slika_thumb').click(function() {
var id = $(this).attr("id");
$('#slika').hide();
$.ajax({
url: 'slike/slika.php?id=' + id,
success: function(data) {
$('#slika').html(data);
$('#slika').fadeIn();
}
});
});
});
我尝试在success
下面使用complete
,但结果仍然相同。
有什么建议吗?
最佳答案
也许尝试将 onload 处理程序绑定(bind)到通过 ajax 加载的数据内的任何图像。
$(document).ready(function(){
$('.slika_thumb').click(function() {
var id = $(this).attr("id");
$('#slika').hide();
$.ajax({
url: 'slike/slika.php?id=' + id,
success: function(data) {
$('#slika').html(data);
$('#slika img').bind("load", function() {
$('#slika').fadeIn();
});
}
});
});
});
关于jquery - 加载后淡入图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2124706/