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 代码正在创建两个我不理解的元素“。” 和 ”..”。

4

1 回答 1

0

元素“。” “..”表示当前目录和父目录。

在函数的开头，您可以隐藏 div：

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

并添加你的加载 gif。

运行后，您隐藏您的 gif 和显示 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 回答