jQuery 読み込み時に画像をフェードインするにはどうすればよいですか?

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

  •  21-09-2019
  •  | 
  •  

質問

私がやりたいのは、ページの読み込み時にロゴをフェードインすることだけです。私は今日 jQuery を初めて使用するのですが、ロード時にフェードインすることができません。助けてください。この質問がすでに回答されている場合は申し訳ありませんが、別の質問に他の回答を適用しようとしましたが、何も機能しないようで、イライラし始めています。

ありがとう。

コード： 

<script type="text/javascript">                                         
$(function () {
.load(function () {
      // set the image hidden by default    
      $('#logo').hide();.fadeIn(3000);
                                }}                     
 </script>                
    <link rel="stylesheet" href="challenge.css"/>  
<title>Acme Widgets</title>         
  </head>     
  <body> 
     <div id="wrapper"> 
     <div id="header">
     <img id="logo" src="logo-smaller.jpg" /> 
     </div>
      <div id="nav">
      navigation
     </div>
      <div id="leftCol">
      left col
     </div>
      <div id="rightCol">
        <div id="header2">
        header 2
        </div>
        <div id="centreCol">
        body text
        </div>
        <div id="rightCol2">
        right col
        </div>
     </div>
     <div id="footer">
     footer
     </div>
     </div>
  </body>
</html>
役に立ちましたか？

解決 13

私は答えを見つけ出します！あなたは以下のようにwindow.onload関数を使用する必要があります。助けのためテック男とカリムに感謝します。注：あなたはまだあまりにも文書レディ機能を使用する必要があります。 

window.onload = function() {$('#logo').hide().fadeIn(3000);};
$(function() {$("#div").load(function() {$('#div').hide().fadeIn(750););

右画像の後に置かれたときそれはまた私のために働いた...おかげ

他のヒント

このスレッドが不必要に論争のようです。

あなたが本当にjQueryのを使用して、正確にこの質問を解決したい場合は、

、以下のソリューションを参照してください。

質問は「jQueryをどのようにして負荷にフェードインする画像を得るのですか？」

まず、簡単なメモます。

これは$（ドキュメント）.ready ...

のための良い候補ではありません

なぜ？ HTML DOMがロードされたときにドキュメントが用意されているため。それはまだ実際にダウンロードすることができる。

- ロゴ画像は、この時点で準備ができていないでしょう！

だから、最初の一般的な質問に答えるために、「jQueryをどのようにして負荷にフェードインする画像を得るのですか？」

： - この例の画像は、「ロゴ」属性= IDを有します 
$("#logo").bind("load", function () { $(this).fadeIn(); });

この質問は尋ねまさにありません。画像が読み込まれたときに、それがフェードインします。あなたがイメージのソースを変更する場合は、新しいソースがロードされたとき、それがフェードインされます。

のjQueryと一緒にwindow.onloadを使用する方法についてのコメントがあります。これは完全に可能です。できます。それは行うことができます。しかし、window.onloadイベントは、ケアの特定のビットを必要とします。あなたは複数回それを使用する場合、あなたは以前のイベントを上書きするためです。例（...それを試して自由に感じる）。

function SaySomething(words) {
    alert(words);
}
window.onload = function () { SaySomething("Hello"); };
window.onload = function () { SaySomething("Everyone"); };
window.onload = function () { SaySomething("Oh!"); };
もちろん、あなたのコード内で近いので一緒に3つのonloadイベントがありません。あなたが最も可能性が高い何かのonloadイベントを行うスクリプトを持っている、そして、あなたの画像をフェードインするためにあなたのwindow.onloadハンドラを追加します - 「なぜ私のスライドショーが動作を停止しました!!？」 - 。window.onloadの問題のために、

のjQueryの一つの大きな特徴は、あなたがjQueryのを使用してイベントをバインドするとき、それらはすべて追加されますことを。

であります

だから、あなたはそれを持っている - 答えとして質問はすでにマークされていますが、答えはすべてのコメントをもとに不十分であると思われます。私は、これは世界の検索エンジンから到着誰にも役立ちます願っています！

あなたは5行目に構文エラーがあります：

$('#logo').hide();.fadeIn(3000);

にする必要があります：

$('#logo').hide().fadeIn(3000);

単に代わりに、最初の呼び出しdisplay:hiddenの、fadeInとコールhideにロゴのスタイルを設定します：

$(document).ready(function() {
    $('#logo').fadeIn("normal");
});

<img src="logo.jpg" style="display:none"/>

あなたは.each()関数を介して実行する必要がある複数の画像でこれを行うには。この作品は、私は確かにそれがどのように効率的ではありませんよ。

$('img').hide();
$('img').each( function(){
    $(this).on('load', function () {
        $(this).fadeIn();
    });
});

window.onload信頼できるが..私は使用することではありません。

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>
Sohneeとkarim79の例を使用して

。私はこれをテストし、それがFF3.6とIE6の両方で働いています。

<script type="text/javascript">
    $(document).ready(function(){
        $("#logo").bind("load", function () { $(this).fadeIn('slow'); });
    });
</script>

<img src="http://www.gimp.org/tutorials/Lite_Quickies/quintet_hst_big.jpg" id="logo" style="display:none"/>

キーは、私たちがイメージがロードされている知っているので、$(window).load(function(){}を使用することです。フェードをフェードインを使用して、その後、CSS機能を介して画像を非表示

$(function() {

  $(window).load(function(){
    $('#logo').css({visibility: 'visible', opacity: 0}).fadeIn(1000);
  });

});

からのアイデア： http://www.getpeel.com/する

を

を使用して Desandroだimagesloaded のプラグインの

1 - CSSで非表示イメージます：

#content img { 
    display:none; 
}

2 - JavaScriptで負荷上の画像にフェード

var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
    $(image.img).fadeIn();
});

OK、私はこれをしなかったし、それが動作するようにします。これは、基本的には、ここでは異なる応答から一緒にハッキングされます。このスレッド内の STILL のない明確な答えがありますので、私はこれを掲示することにしました。 

<script type="text/javascript">
  $(document).ready(function () {
    $("#logo").hide();
    $("#logo").bind("load", function () { $(this).fadeIn(); });
  });
</script>

このはそれについて移動する最良の方法であると私には思えます。 CSSで何を：Sohneeの最高の意思にもかかわらず、彼は、オブジェクトが最初に表示されないように設定しなければならないことを言及しませんでした。ここでの問題は、もしユーザーのJSがオブジェクトを動作していない、これまでどのような理由のためだけに表示されることはありませんということです。良いではない、それはfrikinのロゴだ場合は特に。

このソリューションは、すべて使用してJSでそれをフェードイン、その後、CSSだけではアイテムを残して、第1非表示になります。 JSは、アイテムが普通のようにロードします正常に動作しない場合はこの方法です。

このGoogleにつまずく誰が1位に役立ちます。

希望それほど有用糸ます。

のようにゾーネは言及が、私はこれを追加することになります：

$("img").hide();

$("img").bind("load", function () { $(this).fadeIn(); });

または

$("img").bind("load", function () {
 $(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow"); 
});

私は、次のいずれかを試してみましたが、仕事しませんでした。

    <span style="display: none;" id="doneimg">
        <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
    </span>

    <script type="text/javascript">
        //$(document).ready(function () {
            $("#doneimg").bind("load", function () { $(this).fadeIn('slow'); });
        //});
    </script>
BU以下の一つがうまく働いていた。

<script type="text/javascript">
        $(document).ready(function () {
            $('#doneimg').fadeIn("normal");
        });
</script>

            <span style="display: none;" id="doneimg">
                <img alt="done" title="The process has been complated successfully..." src="@Url.Content("~/Content/App_Icons/icos/tick_icon.gif")" />
            </span>

CSS3 + jQuery ソリューション

jQuery のフェード効果は多くのモバイル デバイスで遅延の原因となるため、これを使用しないソリューションが必要でした。

から借りる スティーブ・フェントンの答え CSS3 トランジション プロパティと不透明度を使用して画像をフェードインするバージョンを適応させました。これにはブラウザのキャッシュの問題も考慮されており、その場合、画像は CSS を使用して表示されません。

これが私のコードです。 作業用フィドル:

HTML

<img src="http://placehold.it/350x150" class="fade-in-on-load">

CSS

.fade-in-on-load {
    opacity: 0;
    will-change: transition;
    transition: opacity .09s ease-out;
}

jQueryスニペット

$(".fade-in-on-load").each(function(){
    if (!this.complete) {
        $(this).bind("load", function () {
            $(this).css('opacity', '1');
        });
    } else {
        $(this).css('opacity', '1');
    }
});

ここで何が起こっているのかというと、読み込み時にフェードインしたい画像 (または任意の要素) には、 .fade-in-on-load 事前に適用されているクラス。これにより、不透明度 0 が割り当てられ、トランジション効果が割り当てられます。CSS でフェード速度を編集して好みに合わせることができます。

次に、JS はクラスを持つ各項目を検索し、それにロード イベントをバインドします。完了すると、不透明度が 1 に設定され、画像がフェードインします。画像がすでにブラウザのキャッシュに保存されている場合は、すぐにフェードインします。

商品一覧ページに使用します。

これは最も美しい実装ではないかもしれませんが、うまく機能します。

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