为什么图片无法在移动设备上加载

Why don't images load on mobile?

本文关键字：加载 移动 为什么      更新时间：2023-09-26

因此，当涉及到在移动设备上加载页面时，图像开始加载，但它们无法完全加载。我已经尝试在显示页面之前预加载图像，但仍然无法加载。我还尝试尽量减少图像的数量，但即使使用一张图像也无法加载。图像也被压缩，因此大小不是加载的问题。有时刷新页面时，会加载图像;但是，其他时候他们不会。这是 ios/浏览器问题吗？可能是 css 的东西？也许一次发生太多事情？

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

这是实时页面（在桌面上加载正常，但在移动设备上加载不正常）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;
}

固定（我们的愚蠢）我们修复了此问题。有一些旧代码使页面响应，以某种方式弄乱了图像的样式。我们摆脱了旧代码，现在它现在运行良好。感谢您的所有帮助:)

在你的CSS文件中试试这个

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

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

相关文章：