Question

我在php中创建一个Web应用程序，您可以在一个文件中提交图片并将其显示在另一个文件中。为了处理人们将多个文件上传到同一个团队时我想创建一个图片库，但是我将这些图片以二进制形式保存在txt文件中，这样我就不必处理文件扩展名了。显示它们。我决定通过显示图像来使用jQuery和AJAX，然后当你点击一些文本时它会转到下一个文本。一切都在我使用chrome的计算机上完美运行，但是当我尝试在移动设备上进行操作时（特别是ios上的chrome和safari），图片无法加载。有谁知道是什么原因造成的？这是我的代码：

<html>
<head>
<title>Yeti Robotics Scouting</title>
<meta name="viewport" content="width=device-width, intial-scale=1, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes">
<link href="scouting.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="scouting.js"></script>
</head>
<body>
    <div class="header">
    <nav>
        <a href="/">Yeti Scouting</a> | 
        <a href="/results.php">Results</a> | 
        <a href="/pit.php">Pit Form</a>
        <form class="search" action="team.php" method="get">
            <input type="number" name="team" placeholder="Enter team number" />
            <button type="submit">Go</button>
        </form>
        </nav>
        <hr />
    </div>
<script>
    var picNum = 1; 
    var teamNumber = <?php echo json_encode($_GET['teamNumber']);?>;
    var picLimit = <?php 
        for($i = 1; file_exists("pics/" . $_GET['teamNumber'] . "/" . $i . ".txt"); $i++){}
        echo json_encode($i - 1);?>;

    $(document).ready(function(){
        $.get("get_picture.php?teamNumber=" + teamNumber + "&pic=1", function(data, status) {
            $("#picture").attr("src", data);
        });
        refreshPicNum();
    });

    function previousPicture() {
        if (picNum > 1) {
            picNum--;
        } else {
            picNum = picLimit;
        }
        $(document).ready(function(){
            $.get("get_picture.php?teamNumber=" + teamNumber + "&pic=" + picNum, function(data, status) {
                $("#picture").attr("src", data);
            });
        });
        refreshPicNum();
    }

    function nextPicture() {
        $(document).ready(function() {
            if (picNum < picLimit) {
                picNum++;
            } else {
                picNum = 1;
            }
            $.get("get_picture.php?teamNumber=" + teamNumber + "&pic=" + picNum, function(data, status) {
                $("#picture").attr("src", data);
            });
        });
        refreshPicNum();
    };

    function refreshPicNum() {
        document.getElementById("pic_num").innerHTML = picNum + "/" + picLimit;
    }
</script>
<center><span id='pic_num'></span></center>
<span class='left_arrow' onclick="previousPicture()">
    ← Previous Picture
</span>
<span class='right_arrow'onclick="nextPicture()">
    Next Picture →
</span>
<img id='picture' src='' alt='What? No picture?!?'>
</body>
</html>

编辑：所以看来无论出于何种原因，该页面都可以在safari上运行，但是它仍然会在chrome中显示img的alt。

Answer 1

您可能已经点击了某些iOS资源限制

由于iOS上可用内存，因此数量有限制   它可以处理的资源：

解码的GIF，PNG和TIFF图像的最大尺寸为3百万像素   适用于RAM低于256 MB，设备为5百万像素的设备   大于或等于256 MB RAM。也就是说，确保宽度*   对于RAM小于256 MB的设备，高度≤3* 1024 * 1024。注意   解码后的尺寸远远大于图像的编码尺寸。

JPEG的最大解码图像尺寸为32万像素   二次抽样。 JPEG图像可能高达3200万像素   子采样，允许JPEG图像解码为具有一个的JPEG图像   十六分之一像素数。 JPEG图像大于2百万像素   被二次采样 - 即，解码为缩小的尺寸。 JPEG子采样   允许用户查看最新数码相机的图像。

对于具有的设备，canvas元素的最大大小为3百万像素   低于256 MB RAM和500万像素，用于具有更高或更高的设备   等于256 MB RAM。 canvas对象的高度和宽度为150   如果未指定，则为x 300像素。

每个顶级的JavaScript执行时间限制为10秒   入口点。如果您的脚本执行时间超过10秒，则Safari   在iOS上停止在代码中的随机位置执行脚本，所以   可能会产生意想不到的后果。

强制执行此限制是因为JavaScript执行可能会导致主要问题   线程阻塞，因此当脚本运行时，用户无法执行   与网页互动。

有关如何在iOS上调试JavaScript的信息，请参阅Safari Web Inspector Guide。

一次可以打开的最大文档数为8   iPhone和9上的iPhone。 iOS注意：在iOS 1.1.4及更早版本中   JavaScript执行时间限制为5秒和大小   分配到10 MB。另外，canvas元素大小的限制   与桌面上的Safari相同。在iOS 2.2.1及更早版本中   所有帧的总和需要小于2百万像素 - 也就是说，   width * height *帧数≤2* 1024 * 1024.在iOS 3.0和   之后，限制仅适用于一次一帧。你还需要   适当的大小图像。不要依赖浏览器缩放。例如，   不要将100 x 100图像放在10 x 10元素中。瓷砖小   背景图像;不要使用大背景图片。

这只是其中的一部分，请参阅此信息以获取更多信息：

https://developer.apple.com/library/mac/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html

Answer 2

看起来iOS Chrome由于某些原因无法执行jQuery，必须与苹果对待第三方浏览器的方式有关。

jQuery不会在移动设备上显示图像

2 个答案: