为什么不将图片加载到移动设备上？
[英]Why don't images load on mobile?
问题描述
因此，在移动设备上加载页面时，图像会开始加载，但无法完全加载。 在页面显示之前，我已经尝试过预加载图像，但是仍然无法加载。 我还尝试最小化图像数量，但是即使只有一张图像也无法加载。 图像也被压缩，因此大小不是加载的问题。 有时，刷新页面时会加载图像； 但是，其他时候他们没有。 这是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;
}
已修正（我们的愚蠢）我们已解决此问题。 有一些旧代码使页面具有响应性，从而以某种方式弄乱了图像的样式。 我们摆脱了旧的代码，现在它的运行非常漂亮。 感谢所有的帮助:)
1 个解决方案
解决方案1
0 2016-03-16 07:22:17
在您的CSS文件中尝试一下
@media only screen and (max-device-width: 480px) {
// css for image here.
}
如果您想了解更多具体信息。 分享您的代码！
为什么我的图像不加载到Vue.js 2中？
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.