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。複数の画像がある場合は、カウンター (ロードする画像の総数を保持する) を実装し、各画像のオンロードでそのカウンターをデクリメントすることができます。

于 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 名前
を付け て保存img2.jpg: http://i.stack.imgur.com/bnU3c.jpg 名前
を付けて保存img3.jpg: http://i.stack.imgur.com /TUaYr.jpg

于 2013-01-22T19:10:06.060 に答える