why dont load the images for the first on my ipad

Question

i have a gallery slider in my project.

i have tested on my computer and all works fine,

but when i tested on my ipad the images for the gallery slider dont load when i open my project.

total images in the slider are 62 and have a total of 1.2mb

My Code:

<div class="main">
    <div class="fixed-bar" style="margin-top:40px">
        <ul id="carousel" class="elastislide-list">
            <li><a href="#p1"><img src="imagens/paginas/1.jpg" /></a>
            </li>
            <li><a href="#p2"><img src="imagens/paginas/2.jpg" /></a>
            </li>
            <li><a href="#p3"><img src="imagens/paginas/3.jpg" /></a>
            </li>
            <li><a href="#p4"><img src="imagens/paginas/4.jpg" /></a>
            </li>
        </ul>
    </div>
</div>

Javascript:

$(document).on('pagebeforeshow', function () {
    $('.fixed-bar').hide();
});

$('#carousel').elastislide({
    minItems: 9
});

Preloader:

var images = new Array()
            function preload() {
                for (i = 0; i < preload.arguments.length; i++) {
                    images[i] = new Image()
                    images[i].src = preload.arguments[i]
                }
            }
            preload(
                "imagens/Paginas/1.jpg",
                "imagens/Paginas/2.jpg",
                "imagens/Paginas/3.jpg",
                "imagens/Paginas/4.jpg",
                "imagens/Paginas/5.jpg",
                "imagens/Paginas/6.jpg",
                "imagens/Paginas/7.jpg",
                "imagens/Paginas/8.jpg",
                "imagens/Paginas/9.jpg",
                "imagens/Paginas/10.jpg",
                "imagens/Paginas/11.jpg",
                "imagens/Paginas/12.jpg",
                "imagens/Paginas/13.jpg",
                "imagens/Paginas/14.jpg",
                "imagens/Paginas/15.jpg"
 )

Answer 1

I solved my problem.

what i have done:

Before: i had before one html document with several data-role="pages" and the first data-role="page" are my menu where the user can select the options. When the user clicks on one of this options my code was <a href="#p2"></a> , the normal to go to the another page, (Note: only one of this options have to load the images in the gallery in the another page)

After: And now, i have divide this document in two. One document html for only the start page (menu), and the rest of the several data-role="pages" in another document.

How i have done the call:

i use a popup with new functions and after the use select of one of this i had use this code:

<a href="../thisdocument.html" target="_parent"></a>

and the magic is done. without extra code etc.... only load the document html which contains the gallery slider from another sub-folder.