加载后淡入淡出图像
我正在尝试使用fadeIn效果将图像加载到div中。 问题是我不知道如何避免同时加载和褪色。 我想要加载图像，在完全加载后应该将其淡入。
http://www.izrada-weba.com/vedranmarketic
这些是图像拇指：
这是应该加载图像的容器：
这是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(); } }); }); });
我尝试使用complete以下success但仍然是相同的结果。 任何建议？
也许尝试将onload处理程序绑定到通过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(); }); } }); }); });
您可以根据需要隐藏图像。 我要做的是向图像添加一个load事件处理程序，然后运行你的AJAX来设置HTML。 在你的加载事件处理程序中，淡入图像。如果你只是替换现有图像的源，这将更容易，因为你可以添加加载处理程序 – 它不会在div上工作。
$(document).ready(function(){ $('#slika').find('img').load( function() { $(this).fadeIn(); }); $('.slika_thumb').click(function() { var id = $(this).attr("id"); $('#slika').hide().find('img').hide(); $.ajax({ url: 'slike/slika.php?id=' + id, success: function(data) { var src = $(data).find('img').attr('src'); $('#slika').show().find('img').attr('src',src); } }); }); });
使用Image Object加载图像。 它会在下载图像时触发load事件。 因此，当100％下载并使用jQuery.fadeIn()时，您将图像放入#slika 。
您需要在.html事件上使用回调函数。
$.ajax({ url: 'slike/slika.php?id=' + id, success: function(data) { $('#slika').html(data, function() { $('#slika').fadeIn(); }); }); });
编辑：由于.html是同步操作，这实际上可能无法正常工作。 你的意思是load（）而不是？
您必须为该映像发出AJAX请求，等待通过侦听成功事件完全加载它。 这将帮助您将图像放入浏览器缓存中。 然后你就可以按照自己的方式去做。 此后将立即加载图像。