Ajax et lazyloading IMG

Bonjour, je me heurte à un problème.

J'ai crée sur un site Wordpress dernière version, php 7.2 une page avec un menu filtre de catégorie.
En gros sur la page (BLOG) toutes les catégories apparaissent et un menu avec les différentes sous-catégories existent
qui permet de n'afficher que les sous-catégories sélectionnées; Pour ce menu j'ai crée une fonction en ajax.
Tout fonctionnes bien : Voici le code
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 function cat_ajax_get_3(catID) { var ajaxurl = '/wp-admin/admin-ajax.php'; jQuery.ajax({ type: 'POST', url: ajaxurl, data: {"action": "filtre-blog", cat: catID }, /* filtre-noustrouver */ success: function(response) { var $el = jQuery("#category-content-blog"); $el.fadeOut(400, function(){ $el.html(response).fadeIn(400); /* RESPONSE */ }); return false; } }); } jQuery( ".category-blog #category-menu a.ajax" ).click(function() { jQuery(".category-blog #category-menu a.ajax").removeClass("current"); jQuery(".category-blog #category-menu a.ajax").removeClass("current"); jQuery(this).addClass("current"); var catnumber = jQuery(this).attr('data-term-number'); cat_ajax_get_3(catnumber); });
Le problème c'est que chaque catégorie a un IMAGE DE UNE et qu'un script (blazy.js) est appliqué dessus.
Quand j'active le filtre du menu, l'image disparait... normal car il faut revalider le script blazy cf : bLazy

J'ai donc essayé cela :
Code:

1 2 3 4 5 6 7 8 9 10 jQuery(document).ready(function(){ var mybLazy = new Blazy({ selector: ".b-lazy" , offset: 0 , container: "window" , successClass: "b-loaded" }); mybLazy.revalidate(); });
Mais cela ne fonctionne pas... Une idée ?

je me demandais si je ne devait pas plutôt appliquer une fonction au niveau de l'AJAX ?
J'avoue que j'ai pas mal cherché mais je suis perdu... Donc si vous pouvez m'éclairer ?

Salut,

pourquoi place ton revalidate sur document ready ? cet état ne se produit qu'une fois à la fin du chargement de ta page.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
 
function cat_ajax_get_3(catID) {
        var ajaxurl = '/wp-admin/admin-ajax.php';
        jQuery.ajax({
            type: 'POST',
            url: ajaxurl,
            data: {"action": "filtre-blog", cat: catID }, /* filtre-noustrouver */
            success: function(response) {
                var $el = jQuery("#category-content-blog");
                $el.fadeOut(400, function(){
                    $el.html(response).fadeIn(400); /* RESPONSE */
                });
         var mybLazy = new Blazy({ 
            selector: ".b-lazy" 
            , offset: 0 
            , container: "window"
            , successClass: "b-loaded"
        });
        mybLazy.revalidate();
                return false;
            }
        });
    }
 
    jQuery( ".category-blog #category-menu a.ajax" ).click(function() {
        jQuery(".category-blog #category-menu a.ajax").removeClass("current");
        jQuery(".category-blog #category-menu a.ajax").removeClass("current");
        jQuery(this).addClass("current"); 
        var catnumber = jQuery(this).attr('data-term-number');
        cat_ajax_get_3(catnumber);
    });

c'est à chaque retour de ton ajax que tu dois revalider.

Sinon, pour information il vaux mieux que tu utilises la méthode done plutôt que la propriété success pour ton ajax.

Code:

1
2
3
4
5
6
7
8
9
 
$.ajax({
  url: "https://fiddle.jshell.net/favicon.png"
})
  .done(function( data ) {
    if ( console && console.log ) {
      console.log( "Sample of data:", data );
    }
});

et pourquoi est ce que tu return false ? il n y a aucune raison de le faire.

Merci SHOWIE pour tes éclaircissements.
En vérité je maitrise bien le html, ccs, un peu moins le js et jquery et j'ai voulu creuser le principe de l'ajax.
Donc, comme plein de gens j'ai réadapté un script de github : le script
Mais bon, même si j'ai modifié son script il restait des erreurs. J'ai essayé de comprendre et de ne pas recopier bêtement... mais il restait des erreurs;

Pour le return false, j'avais un doute... c'est vrai que ça n'a rien à faire là.
Pour le reste je vais tester. Tes explications me paraissent logiques.
Pour le revalidate(), j'applique ce que dit le dev' de bLazy.js sur son site... En vrai il y a peu d'explications.
J'ai fait moi même un PLUGIN avec son script. Il marche bien sauf pour l'ajax.

Sinon j'étais en train d'explorer ce genre de chose.
Car si j'ai un autre appel AJAX : il faudra à nouveau que j'appel bLazy() ???
Code:

1 2 3 4 5 6 7 8 9 jQuery(document).ajaxSuccess(function() { var mybLazy = new Blazy({ selector: ".b-lazy" , offset: 0 , container: "window" , successClass: "b-loaded" }); setTimeout(function(){ mybLazy.revalidate();},100); });

Effectivement, si tu as plusieurs appel Ajax différents c'est une bonne idée utiliser ajaxSuccess pour factoriser le code.

Ok, j'essaye. Mais dans mon footer je vois le script blazy et après arrive le script ajax.
Je pensais que l'appel à new Blazy() allait relancer le script mais ça ne semble pas marcher.
pourtant que je fait une " alert('quelconque') " çà marche... C'est vraiment chelou...

Je vais continuer de creuser. Je peux donner l'adresse du site mais en privé uniquement si certains ont le courage ?

oui je t'ai répondu un peu vite seul le revalidate toi être réexécuté.

tu dois avoir les deux bouts de code séparé.

Code:

1
2
3
4
5
6
7
8
9
 
    jQuery(document).ready(function(){
        var mybLazy = new Blazy({ 
            selector: ".b-lazy" 
            , offset: 0 
            , container: "window"
            , successClass: "b-loaded"
        });
    });

Code:

1
2
3
4
 
jQuery(document).ajaxSuccess(function() {
    setTimeout(function(){ mybLazy.revalidate();},100);
});

Pour le moment j'ai essayé bcp de choses mais ça ne marche pas.

-> l'AJAX s’exécute bien.
-> les images en différées via bLazy.j aussi...

Mais les 2 ensembles, non. Quand je déclenche la requête AJAX le script bLazy.js et un autre en jquery ne sont pas exécutés.
Ce qui est normal vu que comme tu l'as dit les fonctions ont déjà été exécutés.
Il faut donc, trouver un moyen de redéclencher les scripts jquery quand un appel AJAX est fait... J'essaye ta solution.

Au final... rien ne marche bien. J'ai fait un test...
Code:

1 2 3 4 5 jQuery(document).ajaxSuccess(function() { setTimeout(function(){ mybLazy.revalidate();},100); alert ('essai'); });
Alert 'essai'; s'affiche mais on dirait que c'est un problème d'ordre d’exécution.
Franchement, je ne sais plus. Je pense que je vais revoir le principe de l'ajax dans wp...
Et pourtant il n'y pas d'erreur d'indiquée.

si tu essai ceci tu obtiens quoi dans la console ?
Code:

1 2 3 4 5 jQuery(document).ajaxSuccess(function() { console.log( mybLazy); alert ('essai'); });

Citation:

ReferenceError: mybLazy is not defined[En savoir plus] myblazy.js:11:5
<anonyme> http://www.xxxxxxxxxxxxx/wp-content/plugins/my-blazy/myblazy.js?ver=1.0.0:11
jQuery 5
dispatch

handle

trigger

l

o

Si je mets toute la fonction ça marche par contre...
Code:

1 2 3 4 5 6 7 8 9 jQuery(document).ajaxSuccess(function() { var mybLazy = new Blazy({ selector: ".b-lazy" , offset: 0 , container: "window" , successClass: "b-loaded" }); console.log( mybLazy); });

Il faut supprimer le var devant mybLazy afin de la rendre globale et accessible de partout.

Code:

1
2
3
4
5
6
7
8
9
 
    jQuery(document).ready(function(){
        mybLazy = new Blazy({ 
            selector: ".b-lazy" 
            , offset: 0 
            , container: "window"
            , successClass: "b-loaded"
        });
    });