7

Chrome で ajax を呼び出したときに読み込み中の画像を表示できないのを助けてください。これが私のスクリプトです

function ajx_load_image(category)
{
    $("#"+category+"-text-1 .loading").show(); // showing image

    $.ajax({
             type:'POST', 
             url: './img_load.php',
             data: {num_count:load_count,cat:category},
             async: false,

            success: function(data)
            {
                data=jQuery.trim(data);
                if(data != ''){                 
                    $("#"+category+"-text-1 .loading").hide();

                    $("#"+category+"-text-1 .items").append(data);
            }
            else{
                $('.next.browse.right.'+category).removeClass('disabled');                                      
            }

            }

        });
}

私のhtmlファイル

<div id="tamil-text-1" class="tab-content">
  <div class="tab-top-curve"><img src="images/tab-top-curve.jpg" width="700" height="19" /></div>
  <div class="tab-mid-curve"> <a class="prev browse left disabled tamil" name="tamil"></a>
    <!-- root element for scrollable -->
    <div class="loading"><img src='images/ajax-loader.gif' /></div>
    <div class="scrollable">
      <!-- root element for the items -->
      <div class="items"> </div>
    </div>
    <!-- "next page" action -->
    <a class="next browse right tamil" name="tamil"></a> </div>
  <div class="tab-top-curve"><img src="images/tab-bottom-curve.jpg" width="700" height="31" /></div>
</div>

私もstackoverflowで同じ質問をしましたが、できませんでした。

どんな助けでも大歓迎です。

4

4 に答える 4

1

function ajx_load_image(category) {

var imageLoader =  "#"+category+"-text-1";   
$(imageLoader +" .loading").show(); // showing image
$.ajax({
         type:'POST', 
         url: './img_load.php',
         data: {num_count:load_count,cat:category},
         async: false,

        success: function(data)
        {
            data=jQuery.trim(data);
            if(data != ''){                 
                $(imageLoader +" .loading").hide();

                $(imageLoader +" .items").append(data);
        }
        else{
            $('.next.browse.right.'+category).removeClass('disabled');                                      
        }

        }

    });

}

上記のコードが役立つことを願っています。

jQueryに使用する前に、引数値と静的文字列を渡すconcatにのみ変更してください。

于 2013-06-04T10:48:23.187 に答える
1

よくわかりませんが、これが役立つかもしれません。成功するとすぐに画像が$.ajaxStart()非表示になるため、関数内で画像を表示して非表示にするようにしてください。$.ajaxComplete()

function ajx_load_image(category){

    $.ajax({
        type:'POST', 
        url: '/img_load.php', //<------------------here '.' single dot removed
        data: {num_count:load_count,cat:category},
        async: false,
        beforeSend: function(){
           $("#"+category+"-text-1 .loading").show(); // showing image
        },
        success: function(data){
        data=jQuery.trim(data);
        if(data != ''){                 
                $("#"+category+"-text-1 .items").append(data);
        }else{
            $('.next.browse.right.'+category).removeClass('disabled');                                      
        }

        },
        complete: function(){
            $("#"+category+"-text-1 .loading").hide();
        }

     });

}

アップデート：

を使用beforeSend : function(){}して読み込み中の画像complete: function(){}を表示したり、 を使用して読み込み中の画像を非表示にしたりできます。

于 2013-06-04T10:21:53.677 に答える
1

あなたのPHPスクリプトは何を返しますか?

おそらく、ここでは AJAX をまったく使用しない方がよいでしょう。PHP スクリプトがバイナリ イメージ データを出力するようにし (例: PHP 関数 "imagepng" を使用)、PHP のヘッダー関数を使用して応答ヘッダーに正しいコンテンツ タイプ (例: "image/png") を追加することを忘れないでください。

次に、AJAX を使用する代わりに Image オブジェクトを使用します。

var img = new Image();

img.onload = function() 
{ 
   // ... your code when image was loaded.
};

img.src = 'img_load.php?num_count=' + load_count + '&cat=' + category;

古いブラウザーをサポートしたい場合は、document.createElement('img'); を使用して画像要素を作成することもできます。

于 2013-06-04T10:22:51.363 に答える
0

画像パスとリクエスト タイプに問題があるようです。問題を解決するには:

  1. コードが存在するのと同じディレクトリに画像を置くか、画像パスに完全な URL を使用します。
  2. 次に、async: true を設定します。

クロムが単一のドットパスをサポートしていないことがあるため、これで問題が解決することを願っています。

于 2013-12-17T05:46:19.700 に答える