Question

我试图使用与创建它们的函数不同的函数来附加图像元素。这样做的原因是实现加载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;
    }

Answer 1

为所有图片添加onload事件处理程序。计算仍然需要加载的图像数量，如果它达到0你就可以了。

images.addEventListener或images.attachEvent（适用于InternetExploder）

Answer 2

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

Answer 3

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

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

更新后的代码：

我们将此代码命名为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
保存为img2.jpg：http://i.stack.imgur.com/bnU3c.jpg
保存为img3.jpg：http://i.stack.imgur.com/TUaYr.jpg

一旦加载动态数组的最终图像，我该如何调用函数？

3 个答案: