chenge img src using Jquery before it render the old

[bastunqk]

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]

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

[bastunqk]

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

[JohnMotylJr]

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]

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]

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

[bastunqk]

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

[Author]

Posts