Ajout de LazyLoad et InfiniteScroll au thème WordPress
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 ?
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.
0 commentaire