点击时用 jquery 替换 img src答案

【问题标题】：replace img src with jquery on click点击时用 jquery 替换 img src
【发布时间】：2012-09-18 12:02:58
【问题描述】：

这看起来像是小游戏，但我不知道如何替换图像的 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');
});

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

【问题讨论】：

每次点击图片后清除浏览器缓存是否还会重现？
@InviS - #mix 是锚（Mix
）

图像（您要替换的）在哪里？如果#mix 是锚。

标签： jquery image load fadein removeclass

【解决方案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" />

【讨论】：

它仍然将新图像放在旧图像下方。
什么 id 或 class 有包含图片的 img 标签？
看看我的编辑。将#yourimagediv 更改为#brick-image。和 image.php 到 build.php。我也用 inviS 上面的答案改进了我的方法

【解决方案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();
});

【讨论】：