How to make image load smoother in Phonegap application

Question

I have an application build in Phonegap in which on some pages, i have some divs, whose background are set to some images that are present in web.

<div class="clipBoard"></div>

.clipBoard {
   background: url(http://mydomain.com/img/img_1.png);
}

When i navigate to that page it takes time to show that image specially on android. Can we make some arrangements so as to show the fully developed image ?

Answer 1

You can pre-load that image when the app starts,

body:after{
   content: url(http://mydomain.com/img/img_1.png) display:none;
}

So when you navigate to that page, it will display that image without any delay.