それがロードされた後、フェードインの画像

StackOverflow https://stackoverflow.com/questions/2124706

  •  22-09-2019
  •  | 
  •  

質問

私は、フェードイン効果を持つ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が、それでも同じ結果を使用しようとしました。 何かアドバイス？

役に立ちましたか？

解決

たぶん、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();  
          });
        }
      });    

  });

});

他のヒント

あなたが必要として

あなたは、で開始する隠されたイメージを持っています。私は何だろうと、HTMLを設定するには、あなたのAJAXを実行し、画像への負荷のイベントハンドラを追加しています。あなただけの既存のイメージのソースを置き換えるならば、あなたはそれに負荷ハンドラを追加することができますので、あなたのloadイベントハンドラ、フェード画像ではそれが容易になりますで - 。それは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);
          }
        });    

    });

});
イメージオブジェクトを使用して

ロード画像。画像がダウンロードされるとき、それはloadイベントを発生させます。あなたは#slikaに画像を置くので、それの100％がダウンロードされ、使用jQuery.fadeIn()とき。

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

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

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

編集：これは実際に同期動作さ.htmlに起因する動作しない場合があります。あなたは）平均負荷（DID代わりに？

あなたは、それが成功のイベントに聴くことによって完全にロードされるのを待つをその画像のAJAX要求を発行する必要があります。これは、ブラウザのキャッシュに画像を取得するのに役立ちます。次に、あなたはそれをあなたの方法を行うことができます。画像は、この後すぐにロードされます。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top