Question

我已经实现了一些PHP和CSS代码来为着陆页选择随机背景图像。当您第一次访问该页面时，会出现加载问题，例如背景图像不显示，或者只显示部分背景图像（在实际内容下方）。这种情况发生在设备上的所有平台上。

当我点击刷新时，图像开始正确显示，但在前一次或两次刷新之前，他们不会。

感谢您的帮助。你可以在这里看到这个页面：

HTML：

<?php
  $bg = array('bg-01.gif', 'bg-02.gif', 'bg-03.gif', 'bg-04.gif', 'bg-05.gif', 'bg-06.gif', 'bg-07.gif', 'bg-08.gif', 'bg-09.gif', 'bg-10.gif', 'bg-11.gif', 'bg-12.gif', ); // array of filenames

  $i = rand(0, count($bg)-1); // generate random number size of the array
  $selectedBg = "$bg[$i]"; // set variable equal to which random filename was chosen
?>

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=1100">
<title>Boris Kholodov &#183; Real Estate Broker &#183; Toronto, Canada</title>
<meta name="description" content="List your property with Boris Kholodov, the Number 1 real etsate broker in downtown and central Toronto by number of units sold in 2014.">

<link rel="stylesheet" type="text/css" href="design.css">


<!-- BACKGROUND IMAGES -->
<style type="text/css">
<!--
body{
background: url(backgrounds/<?php echo $selectedBg;?>) no-repeat center center fixed;
-webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
-->
</style>
<!-- BACKGROUND IMAGES -->

Answer 1

这是因为在服务器上找不到您的某些图像，例如：

http://agentboris.com/backgrounds/bg-12.gif

Chrome中的所有其他内容都很适合我。

Answer 2

这是因为浏览器缓存了您的图片。浏览器会根据各种因素保留图像一段时间。您可以查看此问题

How long are files usually kept in a browser's cache

我不想让图片部分加载然后你可以使用这个插件https://github.com/desandro/imagesloaded

它将隐藏图像直到加载然后显示

随机背景图片导致着陆页上的显示问题？

2 个答案: