Ok, Hopefully this makes a little sense. I have a changing amount of images within a folder which I use php to discover. The images that are found are then passed on to my javascript as variables for location and total number of files found in the given folder.
An array consisting of the various image locations is made and then used to create the new images that are appended to a already existing div.
The question would be how can I separate the appendChild part of the function so that it could be called after the full array had been built rather than appending every iteration. The hope in doing that would be to show a loading gif while the collection was being assembled and once that was to done append the array to the document as a whole instead of as each file is loaded.
<!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>
Sorry for the hard to follow variable names. Feel free to chop up the code as much as you'd like. Just explain why things were changed! Also the php code is creating two elements that I don't understand "." and "..".
Elements "." and ".." means current and parent directories.
At the beginning of your function you can hide div:
document.getElementById("container").setAttribute("style","display:none");
and add yor loading gif.
After you function you hide your gif adn 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");
}
...