jQuery Girl
  1. jQuery Girl
  3. Rendre la fonction jquery exécutée au chargement de la page
Intereting Posts
Ajout d’une timer à DIV pliable animée Requête jQuery Ajax inter-domaines et service REST WCF jquery sélectionner (chacun) toutes les cases à cocher? jqgrid editoptions custom_func avec required = false Table pliante dans jQuery Obtenez Fancybox pour coopérer avec News Item de Plone image Boucle à travers les cellules d’une colonne (pas les cellules d’une ligne) avec Jquery (ou js) sur une table HTML? Compte à rebours JQuery retardé Sélecteur conditionnel jQuery pour les lignes de table Utiliser .Net-Repeater avec jquery Mauvaise version de JQuery en cours de chargement Dans une instruction if / else, e.preventDefault () n’effectue pas 100% des conditions. Blink une div avec jQuery Comment élever un événement «terminé» sur un événement de soumission? La disposition de la grid CSS dans Chrome ne semble pas fonctionner correctement avec plus de 1000 lignes

Rendre la fonction jquery exécutée au chargement de la page

J’ai une fonction jQuery pour changer l’opacité d’une image sur le survol de la souris afin de produire un effet de pulsation, mais j’aimerais le modifier pour que l’image clignote dès le chargement de la page, en supprimant les éléments de survol de la souris .

Voici le code que j’ai 

(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(); } }) }); }

De http://www.infinitywebcreations.com/2011/01/how-tcreate-a-throbbingpulsing-image-effect-with-jquery/ 

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

Je ne vois pas pourquoi vous ne pourriez pas simplement supprimer le code relatif aux événements mouseover et mouseout . Si par “chargement de page” vous voulez dire quand le document HTML est chargé, essayez ceci: 

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

Si par “chargement de page” vous voulez dire quand toutes les images d’une page ont également été chargées, essayez ceci: 

 $(window).load(function() { window.pulse_image = $('.pulse_image'); window.pulse_continue_loop = true; PulseAnimation(); });

Ce dernier exemple de code attendra que le chargement de toutes les images soit terminé. Cela se déclenchera via la window “chargée”. Le premier exemple de code montre plutôt que le document est prêt, ce qui signifie que le document a été chargé, mais que toutes les ressources associées au document ne l’ont pas non plus. 

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

Voici comment je l’ai fait:

Voici une variante qui charge les données par défaut avec un appel ajax lors du chargement de la page. 

 $(document).ready(function() { $.ajax({ type: 'post', url: 'include/ajax.php', data: $('#search_filters').serialize(), success: function (response) { $('#search_display').html(response); } }); }); 
  $(document).ready(function() { window.pulse_continue_loop = true; window.pulse_image = $('.pulse_image'); setTimeout(function(){ PulseAnimation(); } // start the loop });

vous pouvez essayer de cette façon aussi. cela se déclenchera chaque fois que votre page se charge. 

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

Il y a plusieurs façons de créer cet effet, mais celui que j’ai compris le plus rapide est 

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

Ce n’est pas la meilleure solution à coup sûr, mais cela fera le “truc” … ajoutez simplement ceci dans le rappel de document.ready .