使用jQuery在Chrome中更改图像不会加载

Question

I have this code:

$('#logo a img').attr('src', window.location.protocol + "//" + window.location.host + '/images/loader.gif');

It's jQuery. It is made to change the image to the loader, it works in IE and Firefox, but in Chrome it appears that: http://gyazo.com/6dad40741782b122cf621716ff2b86ec I've tried to load it with the url and Chrome finds the image, but it just don't load in the page. What can be the reason? It just works when you click 'Log in', I don't know why because it's the same function... Thank you so much!

PS: Sorry for my bad english ;(

PS 2: I don't want to use CSS if it's possible, thanks

Here's the live Demo, just click the logo (for example): http://www.sploonder.com/

Answer 1

Why don't you preload the loader image before use it.

Just run this code when the document is ready.

$('<img>').attr('src', window.location.protocol + "//" + window.location.host + '/images/loader.gif');

And try it again.

Answer 2

我尝试了该解决方案（预加载图像），它有时可以工作，所以我不得不使用CSS。