1

我正在尝试使用与创建它们的函数不同的函数来附加图像元素。这样做的原因是为了实现加载 gif，并且还可以更平滑地加载图像。

PHP

$dir = "images/";
$dh = opendir($dir);
while (false !== ($filename = readdir($dh))) {
$files[] = $filename;


}
foreach ($files as $key=>&$value) {
if (strlen($value) < 3) {
    unset($files[$key]);
}

}
foreach($files as $key => $value) { 
if($value == "") { 
unset($array[$key]); 
} 
} 
$sorted_array = array_values($files);  
uasort ( $sorted_array , function ($a, $b) {
        return strnatcmp($a,$b); // or other function/code
    }

);
$filecount = count($sorted_array);
print_r($sorted_array);

javascript

 var photos=[];
 var image;
 function map(id){
var name=<?php echo json_encode($sorted_array);?>;
var elements=<?php echo $filecount?>;
for(i=0;i<elements;i++){
    photos[i]=new Array("images/"+name[i]);
    image=new Image();
    image.setAttribute("class","container");
    image.setAttribute("id",photos[i]);
    image.src=photos[i];
    document.getElementById(id).appendChild(image);
    }
    alert(elements);
    return;
    }
4

3 回答 3

1

为所有图像添加onload事件处理程序。计算多少图像还需要加载，如果它到达0你很高兴去。

images.addEventListener或images.attachEvent（对于 InternetExploder）

于 2013-01-22T18:04:36.117 回答
1

您可以使用Image.onload事件处理程序找出图像何时加载src. 如果您有多个图像，您可能想要实现一个计数器（保存要加载的图像总数）并在每个图像的 onload 中递减该计数器。

于 2013-01-22T18:05:13.883 回答
0

我准备了 3 张不同大小的图像（让它们异步加载）。

它们是~18 Kb、~70 Kb 和~200 Kb。您可以使用它们（在主题末尾提供）。

更新代码：

让我们命名这段代码index.html并将其保存到文件中：

<!DOCTYPE html>
<html><head>
    <script type="text/javascript">
    window.addEventListener('load', function () {

        // Define images    
        var photos = [
            {url:'./img1.jpg', loaded:false},
            {url:'./img2.jpg', loaded:false},
            {url:'./img3.jpg', loaded:false},
            {url:'./img1.jpg', loaded:false},
            {url:'./img2.jpg', loaded:false},
            {url:'./img3.jpg', loaded:false},
            {url:'./img2.jpg', loaded:false}
        ],
        photos_DOM_Elements = [],
        photosLoaded = 0;// Loaded images counter
        container = document.getElementById('div');// Images container

        /**
        * Each image should have event listener for `onLoad` event...
        */
        photos.forEach(function (photo, photoInd) {
            var currentImage = document.createElement('img');

            currentImage.src = photo.url;
            photos_DOM_Elements.push(currentImage);

            // ...and this event should check whether it was the last image that haven't been loaded
            currentImage.addEventListener('load', function (evt) {
                photosLoaded++;

                if (photos.length === photosLoaded) {
                    alert('Loaded');

                    // Move images to a visible container
                    photos_DOM_Elements.forEach(function (DOM_Elem) {
                        container.appendChild(DOM_Elem);
                    });
                }
            });
        });

    });
    </script>
</head><body>
    <div id="div"></div>
</body></html>

另存为img1.jpg： http: //i.stack.imgur.com/UCKzG.jpg
另存为：http img2.jpg: //i.stack.imgur.com/bnU3c.jpg
另存为：http img3.jpg: //i.stack.imgur.com /TUaYr.jpg

于 2013-01-22T19:10:06.060 回答