-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 に答える