5

我的项目中有一个画廊滑块。

我已经在我的电脑上测试过，一切正常，

但是当我在我的 ipad 上测试时，当我打开我的项目时，画廊滑块的图像不会加载。

滑块中的总图像为 62，总共 1.2mb

我的代码：

<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
});

预加载器：

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"
 )
4

3 回答 3

5

我解决了我的问题。

我做了什么：

之前： 我之前有一个带有多个 data-role="pages" 的 html 文档，第一个 data-role="page" 是我的菜单，用户可以在其中选择选项。当用户单击其中一个选项时，我的代码是<a href="#p2"></a>，通常会转到另一个页面，（注意：只有一个选项必须在另一个页面的图库中加载图像）

之后： 现在，我将这份文件一分为二。一个文档 html 仅用于起始页（菜单），其余几个 data-role="pages" 在另一个文档中。

我是如何打电话的：

我使用带有新功能的弹出窗口，在使用其中一个选择后，我使用了以下代码：

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

魔法就完成了。没有额外的代码等......只加载包含来自另一个子文件夹的画廊滑块的文档 html。

于 2013-06-03T09:17:46.750 回答
1

快速尝试：强制预加载所有图像。似乎如果您的 iPad 在第 4 次或第 5 次尝试渲染图像，那是因为他的加载时间很长......

您可以使用以下内容预加载它们：

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(
                "http://domain.tld/gallery/image-001.jpg",
                "http://domain.tld/gallery/image-002.jpg",
                "http://domain.tld/gallery/image-003.jpg"
            )

我阅读了此页面中的信息。还有其他方法可以预加载图像。
我希望这个帮助...

于 2013-05-30T11:37:35.533 回答
0

对于运行在 256 MB 以下 RAM 上的设备，在 iOS Safari 上加载的图像限制为 3 MB，在运行在 256 MB 以上 RAM 上的设备上加载的图像限制为 5 MB。

http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

于 2013-06-06T08:42:33.587 回答