Question

Possible Duplicate:
PHP repeating of an image on a page

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 solution like jquery or JS?

using a possible solution i made the id separate for each image by using this code

echo '<div id="imagebox"  . "i" . "j">';

But this also not helped

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.
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
    });
}
});