Выполнение функции 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/

Ответы

Ответ 1

(function($) {
    $(document).ready(function() {
        window.pulse_image = $('.pulse_image');
        window.pulse_continue_loop = true;
        PulseAnimation(); // start the loop
    });
})(jQuery);

Ответ 2

Я не понимаю, почему вы не могли просто удалить код, относящийся к событиям 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 готов, что означает, что документ был загружен, но не все ресурсы, связанные с документом, также имеют.

Ответ 3

Вот как я это сделал:

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

Ответ 4

  $(document).ready(function() {
    window.pulse_continue_loop = true;
    window.pulse_image = $('.pulse_image');
    PulseAnimation(); // start the loop
  });

Ответ 5

есть много способов сделать этот эффект, но один, который я выяснил быстрее всего,

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

это не лучшее решение наверняка, но оно сделает "трюк"... просто добавьте это в doc.ready

Ответ 6

  $(document).ready(function() {
    window.pulse_continue_loop = true;
    window.pulse_image = $('.pulse_image');
    setTimeout(function(){
      PulseAnimation();
    } // start the loop
  });

Ответ 7

вы тоже можете попробовать. это будет срабатывать всякий раз, когда загружается ваша страница.

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