Сделать функцию jquery запущенной на загрузке страницы

Question

У меня есть функция 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/

Answer 1

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

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

Answer 3

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

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

Answer 7

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

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