gpt4 book ai didi

javascript - 为什么图片在手机上加载不出来?

转载 作者:行者123 更新时间:2023-11-28 06:13:17 28 4
gpt4 key购买 nike

因此,当涉及到在移动设备上加载页面时,图像开始加载但无法完全加载。我已经尝试在页面显示之前预加载图像,但仍然无法加载。我也试图尽量减少图像的数量,但即使只有一张图像也无法加载。图像也被压缩,所以大小不是加载的问题。有时当页面刷新时,图像加载;但是,其他时候他们没有。这是 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.
}

如果你想知道更具体的。分享你的代码!

关于javascript - 为什么图片在手机上加载不出来?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36029007/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com