jquery - 点击时用 jquery 替换 img src

Question

这可能看起来像是小游戏，但我不知道如何替换图像的 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","image.php?"+new Date().getTime());
});
});​

<img id="yourimagediv" src="image.php" />

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();
});