单击将jQuery替换为img src [英] replace img src with jquery on click

问题描述

这可能看起来像是在玩耍，但我不知道该如何替换图像的src属性.

This might seem as child play, but I can't figure out how I can replace the src attribute of an image.

src是生成图像的"build.php".我想要的是，当我单击"mix"时，它将运行build.php生成新图像，删除旧图像，并以淡淡的淡入淡出效果显示新图像.

The src is "build.php" which generate the image. What I want is when I click on "mix" it will run build.php to generate a new image, remove the old image and display the new image with a nice fadeout/fadein.

还带有一个正在构建新图像"，当新图像加载完成时，该图像会隐藏.

Also with an "Building new image" which hides when the new image is done loading.

我尝试过

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

但是第二次单击混合"时，它将在新图像下方放置新图像，而不是删除旧图像.

But the 2nd time I click on "mix" it will place new image under the old image, not remove the old image.

推荐答案

$("#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" />

这篇关于单击将jQuery替换为img src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！