0

ajax を使用して、写真の URL の配列を取得し、それらからギャラリーを作成する必要があります。ダウンロードした画像の数を示すカウンターも作成する必要があります。次のようになります。

var images;
var load_image = new Image();
load_image.onload = function(){
    myPhotoSwipe.show(0);
}
$.each(images['images'], function(key, value) { 
    load_image.src = ('index.php?load_image=' + value);
    $('#image_count').remove();
    $('span[class="loading"]').after('<div id="count"><h6>Images: ['+key+' / '+images_array['images'].length+']</h6></div>');
    images+= '<li><a href="index.php?load_image='+value+'"><img src="index.php?load_image='+value+'" /></a></li>';
});

問題は、カウンターが常に最後から 2 番目の要素に読み込まれ、すべての画像が読み込まれるまでそこにとどまることですが、進行状況のようなそれぞれの負荷を表示する必要があります。

PS私も試しcompleteましたが、役に立ちませんでした。

4

2 に答える 2

0

もうすぐです。問題は、同じ画像オブジェクトを再利用していることです。load_imageインスタンスの配列を作成し、それぞれが戻ってきたら、onload内でカウンターをインクリメントする必要があります。

            function load(){
                var imageUrls = [];
                imageUrls.push('http://www.nasa.gov/images/content/690106main_iss033e005644_full.jpg');
                imageUrls.push('http://www.nasa.gov/images/content/690669main_201209210010_full.jpg');
                imageUrls.push('http://www.nasa.gov/images/content/691806main_hs3_full_full.jpg');
                imageUrls.push('http://www.nasa.gov/images/content/689231main_Webb_Mirror_Cans_orig_full.jpg');
                var images = [];
                var i;
                var counter = 0;
                var mainDiv = document.getElementById('somediv');
                var counterDiv = document.getElementById('counter');

                for (i = 0; i < imageUrls.length; i++)
                {
                    images[i] = new Image();
                    images[i].width = 100;
                    images[i].height = 100;
                    images[i].onload = function () {
                        counter++;
                        counterDiv.innerText = counter;
                    }
                    mainDiv.appendChild(images[i]);
                    images[i].src = imageUrls[i];
                }
            }
于 2012-10-01T05:46:55.860 に答える
0

これで修正されるはずです。その理由は、ロード ハンドラーが 1 つのイメージ オブジェクトのみにバインドされていたためです。

var images;


$.each(images['images'], function(key, value) { 
 var load_image = new Image();

 load_image.src = ('index.php?load_image=' + value);

$('#image_count').remove();

$('span[class="loading"]').after('<div id="count"><h6>Images: ['+key+' / '+images_array['images'].length+']</h6></div>');
images+= '<li><a href="index.php?load_image='+value+'"><img src="index.php?load_image='+value+'" /></a></li>';

load_image.onload = function(){
    myPhotoSwipe.show(0);
}

});
于 2012-10-01T06:03:47.990 に答える