Question

I made a php program to repeat an image on a page in a square box.

The image repeats 100 times in a row and then again 100 times vertically.. that means total 100×100 images are repeating in that square box. The size of one such repeating image is 10×10 pixel.

Now the problem is when the site is to be tested on localhost, the page hangs, when it is tried to be opened, and after it is loaded on scrolling up and down it is slow and hangs a bit.

I used nested for loops to get the image repeated. The code for same is:

<?php
  for($i=1;$i<=100;$i++)
    {for($j=1;$j<=100;$j++)
        {
            echo '<div id="imagebox">';
            echo "<img src='images/image.png'>";
            echo '</div>';
        }
    }
  ?>

Guys what could be the problem??

Thanks in advance for any possible solution.

Any alternate programming technique?

Answer 1

Why not try fetching the image dimensions and then setting the height and width of the container div equal to 100 times of height and width of the image (respectively) and then just use CSS background-repeat property to repeat the image on x and y axis. This solution might work as you are trying to repeat a single image.
See it in action: http://jsfiddle.net/vzX9q

The HTML:

<div id="img"></div>

The Javascript:

$(document).ready(function() {
  var imgSrc = "http://lorempixel.com/100/100";

  $("#img").css({
    background: "url("+imgSrc+") repeat"
  });

 var newImg = new Image();
 newImg.src = imgSrc; 

newImg.onload = function() {
  var imgHeight = newImg.height;
  var imgWidth = newImg.width;

  $("#img").css({
    width : imgWidth*100,
    height: imgHeight*100
  });
}
});