1

I've implemented some PHP and CSS code to select random background images for a landing page. When you first access the page there are loading problems, like the background image doesn't appear, or only part of the background image shows up (underneath the actual content). This happens across all platforms on devices.

When I hit refresh the images start to appear correctly, but before the first one or two refreshes they don't.

Thanks for your help. You can see the page here:

http://agentboris.com/

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 -->
Alex Banman
  • 526
  • 1
  • 6
  • 20
  • 1
    loaded fine for me. The home page image was instantly loaded. The problem is likely because of the image size or file size. Try saving your images optimized for web. I noticed that the images on the inner page loaded pretty blocky. I am using firefox. – floor Mar 02 '15 at 20:43
  • Your script seems fine, but bg-12.gif is not found. – Blah Argh Mar 02 '15 at 20:44
  • Are you sure that the image size would cause it to load blocky or not at all? Wouldn't it just be delayed in loading? – Alex Banman Mar 03 '15 at 14:34

2 Answers2

1

this is because some of your images are not found on the server, for example:

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

Everything else loaded fine for me in Chrome.

gaurav5430
  • 12,934
  • 6
  • 54
  • 111
0

this is beacause of browser caching your images. The browsers will keep the images for some duration depending upon a variety of factors.You can check this question

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

I you dont want the image to load partially then u can use this plugin https://github.com/desandro/imagesloaded

It will hide the image till its loading and then display it

Community
  • 1
  • 1
naman kalkhuria
  • 404
  • 4
  • 8
  • Are you sure it has something to do with the cache? The problem is that they're not displaying at all. Being in the cache implies that the site has the image already. – Alex Banman Mar 03 '15 at 14:33