单击时用jquery替换img src

这可能看起来像是儿童游戏，但我无法弄清楚如何替换图像的src属性。

src是生成图像的“build.php”。 我想要的是当我点击“混合”它将运行build.php生成一个新图像，删除旧图像并显示一个漂亮的淡出/淡出的新图像。

还有一个“建立新图像”，它在新图像加载时隐藏。

我试过了

$("#mix").click(function(){ var img = new Image(); $(img).load(function () { $(this).hide(); $('#loader').removeClass('loading').append(this); $(this).fadeIn(); }).attr('src', 'build.php'); }); 

但是第二次点击“混合”时，它会在旧图像下面放置新图像，而不是删除旧图像。

Answer 1

 $("#mix").click(function(){ var img = new Image(); $(img).load(function () { $(this).hide(); $('#loader').removeClass('loading').append(this); $(this).fadeIn(); }).attr('src','').attr('src', 'build.php'); }); 

看下面 – 工程：

 $(document).ready(function() { $("#yourimagediv").click(function() { $("#yourimagediv").attr("src","https://stackoverflow.com/questions/12476646/replace-img-src-with-jquery-on-click/image.php?"+new Date().getTime()); }); });​ 

Answer 2

 var mix = $('#mix'), jqImage = $('#brick-image'); mix.on('click', function (e) { var img = new Image(); jqImage.fadeOut(); img.onload = function () { jqImage.attr('src', img.src); jqImage.fadeIn(); }; // add param to prevent caching of build.php image img.src = 'build.php?' + new Date().getTime(); e.preventDefault(); });