PhoneGap app doesnt show images consistently

I have created phonegap app for iPhone and iPod touch, though i use to test it on iPod touch.

Problem: The images show up randomly, else it would show a question mark within the placeholder. I have tried running this app at several places like iPhone, iPod, desktop browser (with click event, not touch). Out of which on iPod and Desktop browser it seems to run fine, whereas on iPhone or iPhone Simulator I get random images to be broken. Its an gallery for images, thus images are most important.

Any suggestions or pointers appreciated.

Below is a sample page code:

<div  id="galleryRava" >
        <div id="galleryRavaScroll">
            <!--gallery scroll frame-->
            <!-- /header -->
            <div>
                <div id="galleryRavalist">
                    <div class="gallery-item">
                        <a href="#detailPage" >
                        <div class="galleryimage" id="capsicum_rava_masala"><img src="images/sankalp/rava/capsicum_rava_masala.JPG">
                        </div>
                        <div class="itemJoinBar"></div>
                        <span class="gallerytitle">Capsicum Rava Masala</span>
                        </a>
                    </div>
                        <div class="gallery-item">
                        <a href="#detailPage" >
                        <div class="galleryimage" id="coconut_rava"><img src="images/sankalp/rava/coconut_rava.jpg">
                        </div>
                        <div class="itemJoinBar"></div>
                        <span class="gallerytitle">Coconut Rava</span>
                        </a>
                    </div>
                    <div class="gallery-item">
                        <a href="#detailPage" >
                        <div class="galleryimage" id="crispy_rava"><img src="images/sankalp/rava/crispy_rava.JPG">
                        </div>
                        <div class="itemJoinBar"></div>
                        <span class="gallerytitle">Crispy rava</span>
                        </a>
                    </div>
                    <div class="gallery-item">
                        <a href="#detailPage" >
                        <div class="galleryimage" id="kanchipuram_ac开发者_开发问答hari_rava"><img src="images/sankalp/rava/kanchipuram_achari_rava.jpg">
                        </div>
                        <div class="itemJoinBar"></div>
                        <span class="gallerytitle">Kanchipuram achari rava</span>
                        </a>
                    </div>
                    <div class="gallery-item">
                        <a href="#detailPage" >
                        <div class="galleryimage" id="onion_rava"><img src="images/sankalp/rava/onion_rava.jpg">
                        </div>
                        <div class="itemJoinBar"></div>
                        <span class="gallerytitle">Onion Rava</span>
                        </a>
                    </div>
                    <div class="gallery-item">
                        <a href="#detailPage" >
                        <div class="galleryimage" id="udupi_rava"><img src="images/sankalp/rava/udupi_rava.JPG">
                        </div>
                        <div class="itemJoinBar"></div>
                        <span class="gallerytitle">Udipi rava</span>
                        </a>
                    </div>
                </div>
                <div class="clear"> <br><br><br></div>
            </div>
            <!-- /content -->
        </div><!--gallery scroll ends here-->
    </div>

It's not immediately clear where you're loading the images from. Are these images stored somewhere, online? Or are you trying to access images that are already stored on the device?

And is it correct to say that sometimes the images show up, and sometimes they do not? Have you had an instance where you've had all the images appear? Or is there always at least one image missing?