delay when change pic upon mouseover jquery

Question

i need to change a picture upon mouseover i tried 2 differnet methods but it seems that they lag , or sometimes dont work , or sometimes work depends on the moment i check it. the jquery library i use : http://code.jquery.com/jquery-1.9.1.js maybe the problem is with library i use (i don't know). for the specific html for the example:

<img id="imgrotate" src="http://pursuitnotes.com/wp-content/uploads/2012/07/Einstein-Funny-Face.jpg" width="350" height="350" alt="Einstein-Funny-Face">

and the 2 differnet js codes:

$(document).ready(function() {
    $("img").on({
        "mouseover": function() {
            this.src = "http://www.dorkbotswiss.org/wp-       content/uploads/2014/08/funnny-2.jpg";
        },
        "mouseout": function() {
            this.src = "http://pursuitnotes.com/wp-  content/uploads/2012/07/Einstein-Funny-Face.jpg";
        }
    });
});

and the second one:

$(document).ready(function() {
    $("img").on({
        "mouseenter": function() {
            this.src = "http://www.dorkbotswiss.org/wp-content/uploads/2014/08/funnny-2.jpg";
        },
        "mouseleave": function() {
            this.src = "http://pursuitnotes.com/wp-content/uploads/2012/07/Einstein-Funny-Face.jpg";
        }
    });
});

the second is just a slight diff in between mouserover - mouseenter and mouseout-mouseleave.

so my question is why the delay , and why it doesn't work perfectly all the time. sometimes i even need a click on the pic to trigger it working.

here are the 2 fiddels: http://jsfiddle.net/pxx71p8c/13/ http://jsfiddle.net/pxx71p8c/4/

thanks in advance.

Possible duplicate of http://stackoverflow.com/questions/34052444/replacewith-image-on-hover — guest271314, Dec 15 '15 at 16:20

score 1 · Answer 1 · edited Dec 20 '15 at 22:13

you are changing the source of the image tag, which will make dom load the image again. It might be cached into the browser temp files, but still dom would need to load it again.

Solution - Better to create multiple <img> tags with different source and show/hide them accordingly.

<div id ="image">
    <img 1>
    <img 2>
</div>

Better option would be to put the mouse events on the container div.

score 0 · Answer 2 · answered Dec 15 '15 at 15:43

I prefer to use css, but if you need to do with JQuery try:

$(document).ready(function () {
            $("#imgrotate").mouseover(function () {
                this.setAttribute("src", "http://www.dorkbotswiss.org/wp-content/uploads/2014/08/funnny-2.jpg");
            });
            $("#imgrotate").mouseout(function () {
                this.setAttribute("src", "http://pursuitnotes.com/wp-content/uploads/2012/07/Einstein-Funny-Face.jpg");
            });
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<img id="imgrotate" src="http://pursuitnotes.com/wp-content/uploads/2012/07/Einstein-Funny-Face.jpg" width="350" height="350" alt="Einstein-Funny-Face">

delay when change pic upon mouseover jquery

2 Answers2