-1

可能重复：
PHP 重复页面上的图像

我制作了一个 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>';
    }
}
?>

伙计们可能是什么问题？

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

任何替代编程技术解决方案，如 jquery 或 JS？

使用可能的解决方案，我使用此代码为每个图像单独设置了 ID

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

但这也无济于事

4

2 回答 2

3

也许尝试使用 javascript 延迟加载。它只会在屏幕上加载图像？

例如： http: //www.appelsiini.net/projects/lazyload

于 2013-01-27T13:21:29.077 回答
3

为什么不尝试获取图像尺寸，然后将容器 div 的高度和宽度设置为图像高度和宽度的 100 倍（分别），然后使用 CSS background-repeat 属性在 x 和 y 轴上重复图像. 当您尝试重复单个图像时，此解决方案可能会起作用。的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-27T13:31:05.480 回答