0

わかりました、うまくいけば、これは少し意味があります。PHPを使用して検出するフォルダー内の画像の量が変化しています。見つかった画像は、特定のフォルダーで見つかったファイルの場所と総数の変数として、JavaScript に渡されます。

さまざまな画像の場所で構成される配列が作成され、既存の div に追加される新しい画像を作成するために使用されます。

問題は、すべての反復を追加するのではなく、完全な配列が構築された後に呼び出すことができるように、関数の appendChild 部分をどのように分離できるかということです。これを行うには、コレクションのアセンブル中に読み込み中の gif を表示し、それが完了すると、各ファイルが読み込まれるのではなく、ドキュメント全体に配列を追加することが望まれます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
enter code here`<HTML>
<HEAD>
<TITLE>Use PHP in HTML files</TITLE>
<?php
$dir = "images/";
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
$files[] = $filename;

$filecount = count($files);
}

uasort ( $files , function ($a, $b) {
        return strnatcmp($a,$b); // or other function/code
    }
);
print_r($files);


?>
<script language="javascript" type="text/javascript">

function map(id){
var photos = [];
var test = <?php echo json_encode($files); ?>;
var elements = <?php echo $filecount ?>;
for (i=0;i<=elements;i++){
photos[i] = new Array("images/" + test[i]);
image = new Image();
image.setAttribute("class", "container");
image.setAttribute("id", photos[i]);
image.src = photos[i];

image = document.getElementById("container").appendChild(image);
}

alert(elements);

}
</SCRIPT>
<style type="text/css">
.container {
position: absolute;
height: 664px;
width: 1024px;
left: 0;
top: 125px
}
#loadingBar {
position: absolute;
top: 30%;
left: 30%;
z-index: 100;
}
</style>
</HEAD>

<BODY>
<button id="lower_level" onclick="map(this)">Click This Confused Button</button>
<div id="container"></div>
</BODY>
</HTML>

わかりにくい変数名で申し訳ありません。コードは好きなだけ切り刻んでください。なぜ変更されたのか説明してください！また、PHPコードは、理解できない「。」という2つの要素を作成しています。と ".."。

4

1 に答える 1

0

要素「。」「..」は現在のディレクトリと親ディレクトリを意味します。

関数の開始時に、div を非表示にすることができます:

document.getElementById("container").setAttribute("style","display:none");

読み込み中の gif を追加します。

機能した後、gif と show div を非表示にします。

...

function map(id){
document.getElementById("container").setAttribute("style","display:none");

var photos = [];
var test = ;
var elements = ;

for (i=0;i<elements;i++){

if(test[i] '.' || test[i]'..')
continue;
photos[i] = new Array("../myProject/web/uploads/images/" + test[i]);
image = new Image();
image.setAttribute("class", "container");
image.setAttribute("id", photos[i]);
image.src = photos[i];

image = document.getElementById("container").appendChild(image);
}

alert(elements);
document.getElementById("container").setAttribute("style","display:block");
}

...

于 2013-01-22T08:52:20.927 に答える