Question

因此，在移动设备上加载页面时，图像会开始加载，但无法完全加载。我已经尝试在显示页面之前预加载图像，但仍然无法加载。我还尝试最小化图像数量，但即使使用一个图像也无法加载。图像也是压缩的，因此尺寸不是加载的问题。有时刷新页面时，图像会加载;然而，其他时候他们不会。这是ios /浏览器问题吗？可能是css的东西？也许一下子太多了？

顺便说一句，图像在本地加载正常，但在实际网站上，加载问题仍然存在。它可能是托管服务吗？

这里是LIVE PAGE（在桌面上加载但在移动设备上没有加载） http://thelittlepenguinshop.com/shop.php

感谢所有帮助。

<?php
include 'db/connect.php';
?>
<!DOCTYPE html>
<html>
<head>
<?php include 'includes/head.php' ?>

</head>
<script type="text/javascript">
    var imgs = [
        "img/shopView/IMG_1932.jpg",
        "img/shopView/DSCF2657.jpg",
        "img/shopView/DSCF2655.jpg",
        "img/shopView/DSCF2654.jpg",
        "img/shopView/DSCF2652.jpg",
        "img/shopView/DSCF2647.jpg",
        "img/shopView/DSCF2645.jpg",
        "img/shopView/DSCF2643.jpg",
        "img/shopView/DSCF2641.jpg",
        "img/shopView/DSCF2639.jpg",
        "img/shopView/DSCF2637.jpg",
        "img/shopView/DSCF2635.jpg",
        "img/shopView/DSCF2633.jpg",
        "img/shopView/DSCF2628.jpg",
        "img/shopView/DSCF2627.jpg",
        "img/shopView/DSCF2624.jpg",
        "img/shopView/DSCF2623.jpg",
        "img/shopView/DSCF2619.jpg",
        "img/shopView/DSCF2618.jpg",
        "img/shopView/DSCF2615.jpg",
        "img/shopView/DSCF2610.jpg",
        "img/shopView/DSCF2608.jpg",
        "img/shopView/DSCF2606.jpg",
        "img/shopView/DSCF2602.jpg",
        "img/shopView/DSCF2600.jpg",
        "img/shopView/DSCF2598.jpg",
        "img/shopView/DSCF2594.jpg",
        "img/shopView/DSCF2591.jpg",
        "img/shopView/DSCF2589.jpg",
        "img/shopView/DSCF2587.jpg",
        "img/shopView/DSCF2584.jpg",
        "img/shopView/DSCF2580.jpg",
        "img/shopView/cELSM.jpg",
        "img/shopView/cBae.jpg",
    ]
    function preload(all_imgs) {
        $(all_imgs).each(function() {
            $("<img/>")[0].src = this;
        });
    }
    preload(imgs);
</script>
<body>
<?php include 'includes/body-internals/mainnav.php' ?>

<input type="hidden" class="activeCheck" id="shop">

<div id='sh-ul-wrap' class='card'>
    <div id="sh-ul">
        <?php
            $start_from = 1;
            if (isset($_GET["page"])) { $page  = $_GET["page"]; } else { $page=1; }; 
            $start_from = ($page-1) * 12; 
            $sql = "SELECT * FROM items LIMIT $start_from, 12"; 
            if ($result = $db->query($sql)) {
                if ($count = $result->num_rows) {

                    while($row = $result->fetch_object()) {

                        echo '
        <div class="li">
            <a href="itempage.php?item_id=', $row->item_id, '">
                <div class="sh-it-wrap">
                    <div class="sh-it-names">', $row->item_name, ' <span style="font-weight:300"> | ', $row->item_type, '</span></div>
                    <div class="sh-it-prices">$', $row->item_price, '</div>
                    <img src="img/shopView/', $row->item_img, '">
                </div>
            </a>
        </div>
                        ';              

                    }

                    $result->free();
                }
            }
        ?>
    </div>
</div>
<div id='shop_pg_num'>
    <ul class='card'>
    </ul>
</div>

<?php include 'includes/body-internals/footer.php' ?>

</body>
<script type="text/javascript">
    //keeps the list within the widths of 500 and 950 pixels
    $(document).ready(function() {
        function sh_ul_wrap_width() {
            $('#sh-ul-wrap').css('width', '950');
            if (window.innerWidth >= 1500) {
                $('#sh-ul-wrap').css('width', '950');
            } else if (window.innerWidth <= 500) {
                $('#sh-ul-wrap').css('width', '500');
            }
            $('.sh-it-wrap').css('height', String($('.sh-it-wrap img').height()));
        }
        setInterval(sh_ul_wrap_width, 500);

        //displays number of pages based on how many items are in the database
        function num_pages() {
            var x = '<?php $v = $db->query("SELECT * FROM items"); $count = $v->num_rows; echo $count; ?>';
            var num_pages = Math.ceil(x / 12);

            for (var i = 1; i <= num_pages; i++) {
                $('#shop_pg_num ul').append(
                    '<a href="shop.php?page=' + String(i) + '"><li>' + String(i) + '</li></a>'
                );
            }
        }

        num_pages();

    });
</script>
</html>

这是CSS

#sh-ul-wrap {
        width: 950px;
        margin: 0 auto;
    }

@media only screen and (max-width: 1000px) {
    #sh-ul-wrap {
        width: 90vw;
    }
}

#sh-ul {
    position: relative;
    width: 100%;
    display: block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: inline-block;
}

/*large screen DEFAULT 4 items per row*/
#sh-ul .li {
    width: 25%;
    float: left;
    padding: 0;
    margin: 0;
    text-align: center;
    margin: 10px 0;
}

#sh-ul .li a {
    color: white;
    text-decoration: none;
    transistion: 0.2s ease color;
}
#sh-ul .li a:hover {
    color: #60DFE5;
}
/*#sh-ul .li > span {
    display: block;
}*/

.sh-it-wrap {
    margin: 0 auto;
    width: 200px;
    position: relative;
}

.sh-it-wrap img {
    height: 100%;
    width: 100%;
}

.sh-it-names {
    width: 100%;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    bottom: 0;
    line-height: 50px;
    font-size: 15px;
}

.sh-it-prices {
    width: 50px;
    background-color: rgba(0,0,0,0.6);
    position: absolute;
    top: 0;
    right: 0;
    font-size: 25px;
    line-height: 50px;
}

/*medium screen causes 3 items per row*/
@media only screen and (max-width: 1500px) {
    #sh-ul .li {
        width: 33.3%;
   }
}

/*small screen causes 2 items per row*/
@media only screen and (max-width: 1000px) {
   #sh-ul .li {
        width: 50%;
   }

   .sh-it-wrap {
        width: 75%;
   }
}

#shop_pg_num {
    text-align: center;
}

#shop_pg_num ul {
    list-style-type: none;
    padding: 10px;
    margin-top: 10px;
    border: 0;
    display: inline-block;
}

#shop_pg_num ul li {
    text-align: center;
    font-size: 20px;
    display: inline-block;
    margin-left: 5px;
    margin-right: 5px;
}

固定（我们的愚蠢）我们解决了这个问题。有一些旧的代码使页面响应，以某种方式弄乱了图像的样式。我们摆脱了旧代码，现在它现在工作得非常好。感谢所有的帮助：）

Answer 1

在你的css文件中试试这个

@media only screen and (max-device-width: 480px) {
 // css for image here. 
}

如果您想了解更具体的内容。分享你的代码！

为什么不在移动设备上加载图片？

1 个答案: