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

单击时用jquery替换img src

2 个答案: