Я сделал программу php, чтобы повторить изображение на странице в квадратной коробке.
Изображение повторяется 100 раз подряд, а затем снова 100 раз по вертикали .. это означает, что в этом квадратном поле повторяются изображения 100х100. Размер одного такого повторяющегося изображения составляет 10 × 10 пикселей.
Теперь проблема заключается в том, когда сайт должен быть протестирован на локальном хосте, зависает страница, когда его пытаются открыть, а после того, как он загружается при прокрутке вверх и вниз, он медленный и немного зависает.
Я использовал вложенные для циклов, чтобы изображение повторялось. Код для этого:
<?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>'; } } ?> Ребята, что может быть проблемой?
Заранее благодарим за любое возможное решение.
Любой альтернативный метод программирования?
Почему бы не попытаться извлечь размеры изображения, а затем установить высоту и ширину контейнера div, равную 100 раз по высоте и ширине изображения (соответственно), а затем просто использовать свойство background-repeat CSS для повторения изображения по оси 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 }); } });