web-dev-qa-db-ja.com

ページの読み込み時にjquery関数を実行する

マウスホバー上の画像の不透明度を変更して脈動効果を生成するjquery関数がありますが、ページが読み込まれるとすぐに画像が脈動し、マウスホバー要素をマウスオーバーおよびマウスアウトするように変更したいです。

ここに私が持っているコードがあります

    (function($) {
        $(document).ready(function() {
            window.Pulse_image = null;
            window.Pulse_continue_loop = false;

            $('.Pulse_image').mouseover(function() {
            // User is hovering over the image.
            window.Pulse_continue_loop = true;
            window.Pulse_image = $(this);

            PulseAnimation(); // start the loop
        }).mouseout(function() {
            window.Pulse_continue_loop = false;
            window.Pulse_image.stop();
            window.Pulse_image.css('opacity',1);
        });
    });
})(jQuery);


function PulseAnimation()
{
    var minOpacity = .33;
    var fadeOutDuration = 650;
    var fadeInDuration = 650;

    window.Pulse_image.animate({
        opacity: minOpacity
    }, fadeOutDuration, function() {
        window.Pulse_image.animate({
            opacity: 1
        }, fadeInDuration, function() {
            if(window.Pulse_continue_loop) {
                PulseAnimation();
            }
        })
    });
}

から http://www.infinitywebcreations.com/2011/01/how-to-create-a-throbbingpulsing-image-effect-with-jquery/

jqueryfunctionopacity
15
Naz
(function($) {
    $(document).ready(function() {
        window.Pulse_image = $('.Pulse_image');
        window.Pulse_continue_loop = true;
        PulseAnimation(); // start the loop
    });
})(jQuery);​
15
Nope

mouseoverおよびmouseoutイベントに関連するコードを削除できない理由がわかりません。 「ページの読み込み」とは、HTMLドキュメントが読み込まれることを意味する場合、これを試してください。

$(document).ready(function() {
    window.Pulse_image = $('.Pulse_image');
    window.Pulse_continue_loop = true;
    PulseAnimation();
});

「ページの読み込み」によって、ページ上のすべての画像も読み込まれた場合、これを試してください：

$(window).load(function() {
    window.Pulse_image = $('.Pulse_image');
    window.Pulse_continue_loop = true;
    PulseAnimation();
});

後者のコード例は、すべての画像の読み込みが完了するまで待機します。これは、「ロード」されているwindowを介してトリガーされます。むしろ、最初のコード例はdocumentの準備が整っていることを示しています。つまり、ドキュメントはロードされていますが、ドキュメントに関連するすべてのリソースがロードされているわけではありません。

7
cereallarceny
  $(document).ready(function() {
    window.Pulse_continue_loop = true;
    window.Pulse_image = $('.Pulse_image');
    PulseAnimation(); // start the loop
  });
3
Stphane

これが私がやった方法です：

    <script type="text/javascript">
    $(document).ready(function () {
        alert('Document Ready'); 
        $("#imgPreview").attr('src', '/Upload/Upload_Image.png');
    });
</script>
2
Anjan Kant

その効果を出すには多くの方法がありますが、私が最も早く見つけたのは

 setTimeout(function(){
     $(".Pulse_image").trigger('mouseover');
 }, 1300);

これは確かに最善の解決策ではありませんが、「トリック」を行います...これをdocument.readyコールバックに追加するだけです。

1
dsa

以下は、ページの読み込み時にajax呼び出しでデフォルトデータを読み込むバリエーションです。

$(document).ready(function() {

    $.ajax({
        type: 'post',
        url: 'include/ajax.php',
        data: $('#search_filters').serialize(),
        success: function (response) {
            $('#search_display').html(response);
        }
    });

});
1
Mike Volmar
  $(document).ready(function() {
    window.Pulse_continue_loop = true;
    window.Pulse_image = $('.Pulse_image');
    setTimeout(function(){
      PulseAnimation();
    } // start the loop
  });
0
Kaptan

この方法でも試すことができます。これは、ページがロードされるたびにトリガーされます。

function pageLoad(sender,args) {
// call your function
}
0
Senguttuvan Amaladass