Image change onclick using javascript is very fast?

Question

Html and Javascript code:

<img  src="imgs/right.gif" id="image_change" onclick="changeImage()"/>

<script>
    function changeImage() {
var src = document.getElementById("image_change").src;  
    var imgsrc = src.substring(src.lastIndexOf("/")+1);
    if  (imgsrc == "left.gif")
    {
        document.getElementById("image_change").src = "imgs/right.gif";
        alert('if'+document.getElementById("image_change").src);
    }
    else 
    {
        document.getElementById("image_change").src = "imgs/left.gif";
        alert('else'+document.getElementById("image_change").src);
    }

}
</script>

When i click on the image, a new image is replacing in fraction of milli seconds..can i make the replacing of the image slow by using javascript or by adding any css class to it??any help would be appreciated..

*Replacing* an image source will always immediately remove the current image and start loading (or showing if cached) the next one. If you have *two* image tags, load next image in the hidden one, then increase its opacity while decreasing the opacity of the shown one (whether in JS, or with CSS transitions, both are possible). — Amadan, Nov 20 '14 at 06:13
please give me some referenc code so that i can test it in my code.. @Amadan — User2413, Nov 20 '14 at 06:20
Search for "crossfade images css" or "crossfade images javascript", many tutorials around for those keywords. — Amadan, Nov 20 '14 at 06:24

Anik Islam Abhi · Answer 1 · 2014-11-20T06:23:56.600

2

try this

Using javascript

   var op = 0.1;  // initial opacity
    element.style.display = 'block';
    var timer = setInterval(function () {
        if (op >= 1){
            clearInterval(timer);
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op += op * 0.1;
        alert("here");
    }, 10);
    var img =document.getElementById("image_change");
    fade(img);// Chnage image in fade method

Using jquery

// increase the 500 to larger values to increase the duration 
// of the fadeout and/or fadein
$('#image_change').fadeOut(500, function () {
    $('#image_change').attr("src", "/newImage.png");
    $('#image_change').fadeIn(500);
});

edited Nov 20 '14 at 06:23

answered Nov 20 '14 at 06:14

Anik Islam Abhi

25,137
8
58
80

But you tagged jquery with it . Let me try using javascript – Anik Islam Abhi Nov 20 '14 at 06:17
1

I removed that Tag, and OP asked question that using Javascript – Shoaib Chikate Nov 20 '14 at 06:18
I have added `javscript` part also – Anik Islam Abhi Nov 20 '14 at 06:24

score 1 · Answer 2 · edited May 23 '17 at 10:26

1

The above jQuery way is straight forward and easy , if you want this in vanilla JavaScript you can use setTimeout with opacity to create fade out and fade in effect for further details check link below

Pure JavaScript fade in function

edited May 23 '17 at 10:26

Community

1
1

answered Nov 20 '14 at 06:20

Tauseef Ahmed

21
3

Weafs.py · Answer 3 · 2014-11-20T06:33:31.947

You can do it this way:

function changeImage() {
  setTimeout(function() {
    var src = document.getElementById("image_change").src;
    if (src == "http://s25.postimg.org/iyly1k3uz/arrow_left.png") {
      document.getElementById("image_change").src = "http://s25.postimg.org/tzh36kw3v/arrow_right.png";
    } else {
      document.getElementById("image_change").src = "http://s25.postimg.org/iyly1k3uz/arrow_left.png";
    }
  }, 1000);
}

body {
  background-color: lightblue;
}

<img src="http://s25.postimg.org/tzh36kw3v/arrow_right.png" id="image_change" onclick="changeImage()" />

Md Ashaduzzaman · Accepted Answer · 2014-11-20T06:30:00.940

You can use setTimeout() function of window object to make delay for execution of your code.

Try this :

HTML :

<img src="http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg" id="image_change" onclick="changeImage();" />

javaScript :

function changeImage() {
    var src = document.getElementById("image_change").src;  
    var imgsrc = src.substring(src.lastIndexOf("/") + 1);
    if  (imgsrc == "Cartoon-6.jpg")
    {
        window.setTimeout(function(){
            document.getElementById("image_change").src = "http://topwallpaperswide.com/wp-content/uploads/cartoon-wallpapers-jerry-the-mouse-running-and-shouting-20140823213658-53f9097a18af8.jpg";
        //alert('if'+document.getElementById("image_change").src);
        }, 1000);
    }
    else 
    {
        window.setTimeout(function(){
            document.getElementById("image_change").src = "http://www.hdwallpapers-3d.com/wp-content/uploads/2014/03/Cartoon-6.jpg";
        //alert('else'+document.getElementById("image_change").src);
        }, 1000);
    }

}

jsFiddle

i liked your approach but i think your fiddle is not changing image..please make necessary changes in it. — User2413, Nov 20 '14 at 06:27
Can you try it again? In my case it's changing image and giving alert accordingly with specified delay that is 1000ms or 1sec. — Md Ashaduzzaman, Nov 20 '14 at 06:28

Image change onclick using javascript is very fast?

4 Answers4