bastunqk

# March 24, 2013 at 1:32 pm

Hi.
Is there a way to change img src with Jquery before the browser render the image with old src ?
Here is my code:

jQuery.noConflict();

/*Change images src on hover*/
jQuery(document).ready(function($) {
$(‘.logo-wrapper a img’).attr(“src”, “/wp-content/themes/kiote/images/WorldH.png”);

});

And when i click on that page it load’s old picture for second and then it changed the src to new.

JohnMotylJr

# March 24, 2013 at 1:38 pm

http://codepen.io/johnmotyljr/pen/kqpmB

bastunqk

# March 24, 2013 at 1:43 pm

Thank you.
But in your code is happening the same.
Puppies is showing for a sec then it’s changed to cats.
Other ?

JohnMotylJr

# March 24, 2013 at 1:46 pm

Hmm… probably because if you view the source, the scripts are being placed at the very bottom of the body (which is how your suppose to do it). So what you need to do is try moving that code into your head and running it. Since it is such a tiny bit of code you could probably defer it so the code completes before it ever moves into the img element.

EDIT: Hmm… hang on.. i see exactly what you are talking about.

JohnMotylJr

# March 24, 2013 at 1:54 pm

Is there any dynamic reason to be replacing the images? Trying to manipulate an element like that is very tricky (if it can even be really done). What are you trying to accomplish, there may be a better alternative.

You could always do a ghetto trick

$('#js-img').hide(0);

$('#js-img').attr('src', 'new/image/');

$('#js-img').show(0);

— or —

$('#js-img').hide(0).attr('src', 'new/image').show(0);

bastunqk

# March 24, 2013 at 2:13 pm

Thank you.
But this solution worked ok only in chrome.
IE and Firefox didn’t load correctly.

bastunqk

# March 24, 2013 at 2:54 pm

I’ve done it with another img.
Thank you for the useful information :)