2

フェードイン効果でdivにロードされている画像を作成しようとしています。問題は、ロードとフェードを同時に回避する方法がわからないことです。画像をロードしたいのですが、完全にロードされた後、フェードインする必要があります。

http://www.izrada-weba.com/vedranmarketic

これらは画像の親指です：

<div id="thumbs">
                <a href="#" class="slika_thumb" id="1"><img src="slike/th.jpg" border="0"/></a><a href="#" class="slika_thumb" id="2"><img src="slike/th.jpg" border="0"/></a><a href="#" class="slika_thumb" id="3"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a><a href="#"><img src="slike/th.jpg" border="0"/></a> </div>
        </div>

これは、画像をロードする必要があるコンテナです。

<div id="desna_kolona">
            <div id="slika"><img src="slike/c6.jpg" /></div>
        </div>

これはjqueryファイルです：

$(document).ready(function(){

    $('.slika_thumb').click(function() {
        var id = $(this).attr("id");
        $('#slika').hide();

        $.ajax({
          url: 'slike/slika.php?id=' + id,
          success: function(data) {

            $('#slika').html(data);
            $('#slika').fadeIn();
          }
        });    

    });

});

complete以下を使ってみましsuccessたが、それでも同じ結果になりました。何かアドバイス？

4

5 に答える 5

5

ajax 経由で読み込まれるデータ内の画像に onload ハンドラをバインドしてみてください。

$(document).ready(function(){

  $('.slika_thumb').click(function() {
      var id = $(this).attr("id");
      $('#slika').hide();

      $.ajax({
        url: 'slike/slika.php?id=' + id,
        success: function(data) {

          $('#slika').html(data);
          $('#slika img').bind("load", function() {
            $('#slika').fadeIn();  
          });
        }
      });    

  });

});
于 2010-01-23T21:04:15.973 に答える
1

必要に応じて、最初に画像を非表示にします。私がすることは、ロード イベント ハンドラーを画像に追加し、AJAX を実行して HTML を設定することです。ロード イベント ハンドラーで、画像をフェードインします。既存の画像のソースを置き換えるだけで簡単になります。これは、ロード ハンドラーを追加できるためです。div では機能しません。

$(document).ready(function(){

    $('#slika').find('img').load( function() {
         $(this).fadeIn();
    });

    $('.slika_thumb').click(function() {
        var id = $(this).attr("id");
        $('#slika').hide().find('img').hide();

        $.ajax({
          url: 'slike/slika.php?id=' + id,
          success: function(data) {
            var src = $(data).find('img').attr('src');       
            $('#slika').show().find('img').attr('src',src);
          }
        });    

    });

});
于 2010-01-23T21:11:01.960 に答える
0

Image Objectを使用してイメージを読み込みます。load画像がダウンロードされたときにイベントを発生させます。#slikaしたがって、100％ダウンロードされたときに画像を入れて使用しますjQuery.fadeIn()。

于 2010-01-23T21:04:11.150 に答える
0

.html イベントでコールバック関数を使用する必要があります。

    $.ajax({
      url: 'slike/slika.php?id=' + id,
      success: function(data) {

        $('#slika').html(data, function() {
           $('#slika').fadeIn();
        });
      });
    });

編集: .html は同期操作であるため、これは実際には機能しない可能性があります。代わりに load() ということですか？

于 2010-01-23T21:05:11.353 に答える
0

その画像の AJAX リクエストを発行し、成功イベントをリッスンして完全にロードされるまで待つ必要があります。これは、画像をブラウザのキャッシュに入れるのに役立ちます。その後、あなたはそれをあなたのやり方で行うことができます。この後、画像はすぐに読み込まれます。

于 2010-01-23T21:05:19.567 に答える