23

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

13 に答える 13

49

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

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

質問は「jQueryロード時に画像をフェードインさせるにはどうすればよいですか？」です。

まず、簡単なメモ。

これは$（document）.readyの候補としては適切ではありません...

なんで？HTMLDOMがロードされるとドキュメントの準備ができているからです。この時点では、ロゴ画像の準備はできていません。実際にはまだダウンロード中の可能性があります。

したがって、最初に一般的な質問「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イベントがそれほど接近していることはありません。ほとんどの場合、onloadで何かを実行するスクリプトがあり、window.onloadハンドラーを追加して、画像をフェードインします-「スライドショーが機能しなくなったのはなぜですか!!？」--window.onloadの問題が原因です。

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

これで完了です。質問はすでに回答済みとしてマークされていますが、すべてのコメントに基づいて回答が不十分であるようです。これが世界の検索エンジンからやってくる人の助けになることを願っています！

于 2010-03-26T20:39:56.863 に答える
20

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

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

する必要があります：

$('#logo').hide().fadeIn(3000);
于 2009-09-05T17:51:44.600 に答える
10

最初に呼び出すのではなくdisplay:hidden、ロゴのスタイルをに設定して呼び出すだけです。fadeInhide

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

<img src="logo.jpg" style="display:none"/>
于 2009-09-05T17:51:53.693 に答える
6

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

$('img').hide();
$('img').each( function(){
    $(this).on('load', function () {
        $(this).fadeIn();
    });
});
于 2011-11-06T22:49:22.737 に答える
5

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"/>
于 2010-09-21T20:38:16.493 に答える
4

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

<script type="text/javascript">
    $(document).ready(function () {
        $('#logo').hide().fadeIn(3000);
    });
</script>
于 2010-01-11T01:54:05.660 に答える
4

重要なのは$(window).load(function(){}、画像が読み込まれていることを確認するために使用することです。css関数で画像を非表示にしてから、fadeInを使用して画像をフェードインします。

$(function() {

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

});

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

于 2011-05-09T16:19:40.763 に答える
4

Desandroのimagesloadedプラグインを使用する

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

#content img { 
    display:none; 
}

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

var imgLoad = imagesLoaded("#content");
imgLoad.on( 'progress', function( instance, image ) {
    $(image.img).fadeIn();
});
于 2014-09-21T12:53:47.570 に答える
3

OK、これを実行して動作します。基本的に、ここでのさまざまな応答から一緒にハッキングされます。このスレッドにはまだ明確な答えがないので、私はこれを投稿することにしました。

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

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

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

このグーグルにつまずいた他の人が1位のあまり役に立たないスレッドに役立つことを願っています。

于 2011-02-08T11:00:57.450 に答える
3

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

$("img").hide();

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

また：

$("img").bind("load", function () {
 $(this).css({opacity: 0, visibility: "visible"}).animate({opacity: 1}, "slow"); 
});
于 2011-04-05T22:06:59.557 に答える
2

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

    <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>
于 2011-02-19T10:37:00.390 に答える
2

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

これを商品リストページに使用します。

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

于 2014-08-25T22:26:33.920 に答える
-3

答えがわかります！以下に示すように、window.onload関数を使用する必要があります。助けてくれたTecguyとKarimに感謝します。注：ドキュメント準備機能も使用する必要があります。

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

画像の直後に配置したときにも機能しました...ありがとう

于 2009-09-06T14:39:36.183 に答える