Ajout de LazyLoad et InfiniteScroll au thème WordPress

Publié par Jean-Michel le

Je souhaite ajouter les plugins LazyLoad et InfiniteScroll jQuery à mon thème WordPress.

Ils fonctionnent tous les deux bien lorsqu’ils sont utilisés seuls, mais lorsque je les utilise ensemble, le plugin LazyLoad ne se déclenche pas lors du chargement de la page suivante.

Autant que je sache, c’est parce que LazyLoad ne déclenche pas tous les JavaScripts mis en file d’attente dans WP. Donc, pour contourner ce problème, je devrais utiliser une fonction de rappel.

J’ai essayé sans succès de faire fonctionner la fonction de rappel. Qu’est-ce que je fais mal? Ou les deux plugins ne sont-ils tout simplement pas compatibles l’un avec l’autre ?

Lire également:  Modifier le nombre d'éléments du portefeuille sur la page d'accueil Wordpress Cubic Theme

Voici les étapes que j’ai suivies :

1.Mettre en file d’attente les deux scripts

    wp_enqueue_script( 'infinite-scroll', get_template_directory_uri() . '/js/jquery.infinitescroll.min.js', array( 'jquery' ), '', true );

    wp_enqueue_script( 'lazy-load', get_template_directory_uri() . '/bower_components/jquery_lazyload/jquery.lazyload.js', array( 'jquery' ), '', true );

2.Ajout de la fonction de défilement infini

/**
 * Infinite Scroll
 */
function infinite_scroll_js() {
    if( ! is_singular() ) { ?>
    <script>
    addLazyLoad();
    var infinite_scroll = {
        loading: {
            img: "<?php echo get_template_directory_uri(); ?>/img/ajax-loader.gif",
            msgText: "<?php _e( 'Loading the next set of posts...', 'custom' ); ?>",
            finishedMsg: "<?php _e( 'All posts loaded.', 'custom' ); ?>"
        },
        "nextSelector":".nav-previous a",
        "navSelector":".nav-links",
        "itemSelector":"article",
        "contentSelector":"#content #main",
        function(){
            addLazyLoad();
        }
    };
    jQuery( infinite_scroll.contentSelector ).infinitescroll( infinite_scroll );

    </script>
    <?php
    }
};
add_action( 'wp_footer', 'infinite_scroll_js',100 );

3. Ajout de la fonction Lazyload

/**
 * Fix image attributes for lazyload
 */

function add_lazyload($content) {

    $content = mb_convert_encoding($content, 'HTML-ENTITIES', 'UTF-8');
    $dom = new DOMDocument();
    @$dom->loadHTML($content);

    foreach ($dom->getElementsByTagName('img') as $node) {  
        $oldsrc = $node->getAttribute('src');
        $node->setAttribute('data-original', $oldsrc );
        $newsrc = ''.get_template_directory_uri().'/img/nothing.gif';
        $node->setAttribute('src', $newsrc);
    }
    $newHtml = preg_replace('/^<!DOCTYPE.+?>/', '', str_replace( array('<html>', '</html>', '<body>', '</body>'), array('', '', '', ''), $dom->saveHTML()));
    return $newHtml;
}
add_filter('the_content', 'add_lazyload');

4. Ajout du code jquery

function addLazyLoad() {
      $(function() {
         $(".entry-content img").lazyload({
             effect : "fadeIn",
             threshold : 200
         });
      });

}

addLazyLoad();

Solution n°1 trouvée

Vous devez ajouter la fonction de rappel dans la liste d’arguments dans le cadre de l’appel de fonction, plutôt que dans le cadre de l’objet argument :

jQuery( infinite_scroll.contentSelector ).infinitescroll( 
    infinite_scroll, 
    function(){ addLazyLoad() }
);

Vous pouvez supprimer le function(){ addLazyLoad()}qui fait partie de l’ infinite_scrollobjet (après "contentSelector":"#content #main"); ça ne va rien faire.

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *