-2

我制作了一个 php 程序来在一个方形框中重复页面上的图像。

图像连续重复 100 次，然后垂直重复 100 次。这意味着在该方形框中重复了总共 100x100 个图像。一个这样的重复图像的大小是 10x10 像素。

现在的问题是，当要在 localhost 上测试站点时，页面挂起，尝试打开时，加载后上下滚动它很慢并且有点挂起。

我使用嵌套的 for 循环来重复图像。相同的代码是：

<?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>';
        }
    }
  ?>

伙计们可能是什么问题？

提前感谢任何可能的解决方案。

任何替代的编程技术？

4

1 回答 1

1

为什么不尝试获取图像尺寸，然后将容器 div 的高度和宽度设置为图像高度和宽度的 100 倍（分别），然后使用 CSS background-repeat 属性在 x 和 y 轴上重复图像. 当您尝试重复单个图像时，此解决方案可能会起作用。看看它在行动：http: //jsfiddle.net/vzX9q

的HTML：

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

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
  });
}
});
于 2013-01-28T02:57:44.020 回答