Question

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

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

但是当我在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"
 )

Answer 1

我解决了我的问题。

我做了什么：

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

<强>后：而现在，我将这份文件分为两部分。一个文档html仅用于起始页面（菜单），另外几个data-role =“pages”用于另一个文档。

我如何完成通话：

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

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

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

Answer 2

快速尝试：强制预加载所有图像。似乎如果你的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"
            )

我在this page阅读了这些信息。还有其他预加载图像的方法我希望这有帮助...

Answer 3

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

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

为什么不加载我的ipad上的第一个图像

3 个答案: