Change background image of the site for each navigation menu smoothly using jquery

JavaScript
, ,
1

I use javascript function for each menu and call that function onClick event. What i face is the image is not changing smoothly, Some times its loading slowly.

Lets consider 2 links each link calls a function for changing the background of the body

This is how i change now

function events(){

   $("body").css('background-image','url(./wp-content/Uploads/img3.jpg)');

}

  function projects(){

   $("body").css('background-image','url(./wp-content/Uploads/img2.jpg)');
   return false;
   }

<li id="projectsm"><a href="#projects" onClick="projects();" class="stylish">Projects</a></li>
<li id="eventsm"><a href="#events" onClick="events();" class="stylish">Events</a></li>

So when i click it must transform like fade out then like flashing

2

Addressing the slow-load issue: Did you optimize your images?

For instance, if the image is supposed to be 500px width on screen, did you load a 1000px width image?

Did you do image compression appropriate for the web? That is, did you create a jpg and save it at compression 12 (no compression) or something smaller, like 60-70 (greater compression)?

3

I hesitate to say this, but if it’s likely that users will see all of the images eventually, you could preload them so that they are ready when needed.

4

I tried that but still its painfully slow