web-dev-qa-db-ja.com

jQueryロード時に画像をフェードインさせる方法は？

やりたいことは、ページの読み込み時にロゴをフェードインすることです。私は今日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>
jqueryonloadfadein
23
Cool Hand Luke

このスレッドは不必要に物議を醸すようです。

JQueryを使用してこの質問を本当に正しく解決したい場合は、以下の解決策をご覧ください。

問題は、「jQueryを使用すると、ロード時にフェードインする画像をどのように取得できますか？」です。

まず、簡単なメモ。

これは$（document）.readyの良い候補ではありません...

どうして？ HTML DOMがロードされると、ドキュメントの準備ができているためです。この時点ではロゴ画像の準備ができていません-実際にはまだダウンロード中です！

最初の一般的な質問「jQueryでは、ロード時に画像をフェードインさせるにはどうすればよいですか？」 -この例の画像にはid = "logo"属性があります：

$("#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イベントはコード内でそれほど近くにありません。ほとんどの場合、何かをオンロードするスクリプトがあり、window.onloadハンドラーを追加して画像をフェードインします。「スライドショーが機能しなくなったのはなぜですか？」 -window.onloadの問題のため。

JQueryの優れた機能の1つは、jQueryを使用してイベントをバインドすると、すべてのイベントが追加されることです。

質問は既に回答済みとしてマークされていますが、すべてのコメントに基づいて回答が不十分であるようです。これが、世界中の検索エンジンから到着するすべての人に役立つことを願っています！

48
Fenton

5行目に構文エラーがあります。

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

する必要があります：

$('#logo').hide().fadeIn(3000);
19
Traveling Tech Guy

最初にfadeInを呼び出す代わりに、ロゴのスタイルをdisplay:hiddenに設定し、hideを呼び出すだけです。

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

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

複数の画像でこれを行うには、.each()関数を実行する必要があります。これは機能しますが、どれほど効率的かはわかりません。

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

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"/>
4
Max

重要な点は、$(window).load(function(){}を使用することです。これにより、イメージがロードされていることがわかります。 css関数で画像を非表示にし、fadeInを使用して画像をフェードインします。

$(function() {

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

});

アイデア： http://www.getpeel.com/

4
BlissOfBeing

window.onloadはそれほど信頼できるものではありません。

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>
4
J. Hendrix

Desandroのimagesloaded pluginを使用

1-CSSで画像を非表示にします：

#content img { 
    display:none; 
}

2-JavaScriptを使用してロード時に画像をフェードインします。

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

わかりましたので、私はこれをやったと動作します。ここでは、基本的に異なる応答から一緒にハッキングされています。 [〜＃〜] still [〜＃〜]がこのスレッドには明確な答えではないので、これを投稿することにしました。

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

これは、それを実行する最良の方法であるように思えます。 Sohneeの最善の意図にもかかわらず、彼はオブジェクトをCSSで最初にdisplay：noneに設定する必要があることに言及していませんでした。ここでの問題は、何らかの理由でユーザーのJSが機能していない場合、オブジェクトが表示されないことです。特に、それが金色のロゴである場合、良くありません。

このソリューションでは、CSSにアイテムをそのまま残し、最初に非表示にしてから、JSを使用してすべてをフェードインします。このように、JSが適切に機能していない場合、アイテムは通常どおりにロードされます。

このGoogleランク1のあまり役に立たないスレッドにつまずく他の誰にも役立つことを願っています。

3
user607972

Sohneが言及しているように、私はこれを追加します：

$("img").hide();

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

または：

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

次の方法を試しましたが、うまくいきませんでした。

    <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>
2
tugberk

CSS3 + jQueryソリューション

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

Steve Fenton's answer からの借用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 Snippet

$(".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に設定され、画像がフェードインします。画像が既にブラウザキャッシュに保存されている場合、すぐにフェードインします。

これを製品一覧ページに使用します。

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

2
gillytech