0

助けてください。問題の答えを探していましたが、解決策が見つかりません。

$.post() を使用して PHP ファイルから画像名を取得しています

ページに画像のサムネイルがあるページがありますが、srcはありません。ファイルから名前を読み取った後、それらの src を取得したものに変更します。

それらをすべて非表示モードでロードし、その上にローダーをロードしてから、ローダーを削除して画像をフェードインしたいと考えています。

ローダーが起動して非表示になりますが、画像は引き続きロードされます。私が間違っているのは何ですか？

たくさんの感謝。

ここに私のコードの一部: HTML:

<div id="window">
            <div id="wrapper">
                <div class="container" style="left:10px; top:10px;"><img class="image" /></div>
                <div class="container" style="left:120px; top:10px;"><img class="image" /></div>
                <div class="container" style="left:230px; top:10px;"><img class="image" /></div>
                <div class="container" style="left:340px; top:10px;"><img class="image" /></div>
                <div class="container" style="left:450px; top:10px;"><img class="image" /></div>

                <div class="container" style="left:10px; top:120px;"><img class="image" /></div>
                <div class="container" style="left:120px; top:120px;"><img class="image" /></div>
                <div class="container" style="left:230px; top:120px;"><img class="image" /></div>
                <div class="container" style="left:340px; top:120px;"><img class="image" /></div>
                <div class="container" style="left:450px; top:120px;"><img class="image" /></div>

                <div class="container" style="left:10px; top:230px;"><img class="image" /></div>
                <div class="container" style="left:120px; top:230px;"><img class="image" /></div>
                <div class="container" style="left:230px; top:230px;"><img class="image" /></div>
                <div class="container" style="left:340px; top:230px;"><img class="image" /></div>
                <div class="container" style="left:450px; top:230px;"><img class="image" /></div>
            </div>

        </div>

JS:

$('#wrapper').append('<div class="loading"></div>');
$.post('dirscan.php', {'dir':dir},
    function(data){

        imagNames = data;
        ImgCount = imagNames.length;
        totalPages = parseInt(ImgCount / 15) - 1;
        if ((totalPages % 15) != 0) { totalPages++ };

        $('img.image').each(function(i){
            if (imagNames[(pageN*15)+i]) {
                $(this).attr('src', imagNames[(pageN*15)+i])
            }
            else { $(this).addClass('close') }
        })

        $('img.image').load(function(){
            $('.loading').fadeOut(500);
            $('img.image').fadeIn(700);
            $('.loading').remove();})

},'json');
4

1 に答える 1

1

道を見つけた！

$('img.image').each(function(i){
if (imagNames[(pageN*15)+i]) {
$(this).attr('src', imagNames[(pageN*15)+i])
    $(this).load(function(){
$('.loading').fadeOut(500);
$(this).fadeIn(700); //here is the key
$('.loading').remove();})

希望は誰にでも役立ちます。

于 2013-01-27T14:58:44.497 に答える