lazyload : besoin d'aide

[B4rb3rouss]

Bonjour, je me creuse la tête pour mettre en place une fonction "lazyload" pour charger les images lorsqu'elles sont dans le viewport. La procédure est simple : un bout de javascript remplace l'attribute "data-src" en "src" d'un élément lorsqu'il est dans le viewport. Je n'arrive cependant pas à trouver une façon de changer le code html d'une page pour remplacer tous les "src=" en "data-src=" à partir du plugin.

Une idée? Je suppose qu'utiliser un hook est la solution, mais sans exemple j'ai du mal à comprendre comment m'en servir. Il faut juste que je puisse accéder au code html généré par blogotext.

[remrem]

Hey, bonne idée ça, du lazy load ;)

Alors, pour les hook, il faut que je revois la documentation, c'était un premier jet, elle est pas très claire :/

De tête, au réveil, sans doc/code sous les yeux donc probablement pas valide, mais l'idée est là ... J'essaye de rafraîchir la doc ce W.E. et je mettrai un petit mot ici ;)

dans la déclaration de l'addon :

    'hook-push' => array(
            'list_items' => array(
                    'callback' => 'a_lazy_work_on_content',
                    'priority' => 100 // à adapter au besoin, mais à priori pas besoin d'une priorité forte
                )
        ),

et ta fonction

function a_lazy_work_on_content($datas)
{
    // test le contenu
    if (!$datas || !is_array($datas)) {
        return $datas;
    }

    // parcours les articles
    foreach ($datas['1'] as &$art) {
        // pas sûr du 'content' ... faire un var_dump($art) au besoin ...
        $art['content'] = str_replace('src=', 'data-src=', $art['content']);
    }

    return $datas;
}

Voilà pour la partie PHP, comme dit au début, fait à l'arrache ...

[B4rb3rouss]

Merci beaucoup. La doc est pas si mal, il faut bien se dire que j'apprends le PHP sur le tas donc je ne fais pas un public très efficace. Je ne comprenais pas comment récupérer le contenu html généré avant. Apparemment ça se passe uniquement sur les articles.

[remrem]

tu peux aussi le faire sur l'ensemble de la page générée via le hook conversion_theme_addons_end (il faut vraiment renommer les hook ;) ), mais je ne pense pas que ça soit une bonne idée de faire du lazy load au niveau du template, les templates (idéalement) doivent être optimisés et ne pas dépendre de "cache misére" tel que le permet du lazy loading...

[B4rb3rouss]

Ouhla oui, et puis niveau performance c'est moyen ! Quitte à modifier le template, autant passer par le thème.

Je tente ça ce week-end, ça semble très puissant ces hooks une fois qu'on les maîtrise :)

[remrem]

ça semble très puissant ces hooks une fois qu'on les maîtrise :)

ça ouvre pas mal de possibilités, mais il ne faut pas faire n'importe quoi (performances, regex, sécurité ...) sinon ça peux devenir catastrophique (WordPress, joomla ...)

[B4rb3rouss]

Alors j'ai tenté un truc, ça ne fonctionne pas. Je ne me fais pas d'illusions, je n'ai pas pigé comment me servir des hooks. Si tu as le temps et l'envie, je suis preneur de conseils pour apprendre. Tout est là : https://github.com/B4rb3rouss/blogotext-addons/tree/lazyload/lazyload

[remrem]

Je viens de jeter un coup d'oeil a ton addon, pour la partie hook, tu as bon, seul point qui déconne de ce point de vue c'est le $art['content'], comme je l'avais indiqué dans mon exemple, je ne suis pas sûr de mon coup (fait de tête), en vérifiant, il s'agit de $art['bt_content'] ;)

Pour le reste, point de vue du traitement DOM, il me semble que c'est perfectible, je me penche dessus et je te pousse un PR dessus avec quelques modifications.

[B4rb3rouss]

Merci beaucoup. Là, même en modifiant pour bt_content je me retrouve avec une page vide, je ne sais pas si le hook s'exécute bien.

[remrem]

le hook se lance bien, c'est le traitement du document qui merdouille. Pour tester le hook :

function a_lazy_work_on_content($datas)
{
    var_dump($datas);
    return $datas;
}

[B4rb3rouss]

ok, j'ai trouvé. J'ai juste un souci avec l'UTF-8 sinon le hook tourne bien.

[B4rb3rouss]

Non, pas l'UTF-8, le fait qu'il me rajoute un <head><body> en plein milieu...

[remrem]

pour le formatage html essaye : $doc->loadHTML($art['bt_content'], LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);

[B4rb3rouss]

Déjà tenté, ça ne suffit pas. Mon problème est que je veux modifier les tags , rajouter du code html juste à côté et enregistrer ça à la place du d'origine.

[remrem]

J'ai poussé un PR à tester : https://github.com/B4rb3rouss/blogotext-addons/pull/1 Je pense que c'est dans ce sens qu'il faut aller...

[B4rb3rouss]

J'étais justement sur le "createElement", merci !

[B4rb3rouss]

Niveau perf, le processeur s'affole quand on laisse la partie noscript. Avant ça, en commentant cette section ça semble fonctionner comme prévu, merci !

Toutefois, le lazyload ne marche pas bien, il charge une grande image vide au lieu de charger l'image attendue. Je n'y vois plus très clair donc je fais une pause.

[remrem]

dirty fix pour l'infinite loop https://github.com/B4rb3rouss/blogotext-addons/pull/2

Par contre ton JavaScript merdouille, regarde la console dans tes outils de développeurs (firefox ou chrome ou vivaldi ou ...)

Uncaught ReferenceError: getOffsetTop is not defined
    at Object.loadVisibleImages (lazyload.js:47)
    at _lazyLoaderInit (lazyload.js:86)
loadVisibleImages @ lazyload.js:47
_lazyLoaderInit @ lazyload.js:86

[B4rb3rouss]

Merci. Oui, j'ai vu l'erreur JS. C'est très étrange, je l'utilise déjà dans d'autres pages sans cette erreur :/

[B4rb3rouss]

On dirait bien que le js ne détecte pas quand l'image est dans le viewport avec le code généré par blogotext. Je creuse ça maintenant, le code php est nickel grâce à toi ! Merci, j'apprends beaucoup :)

[remrem]

Bah ... essaye de mettre une fonction genre https://github.com/cferdinandi/getOffsetTop/blob/master/getOffsetTop.js

[B4rb3rouss]

J'ai joué la carte de la simplicité en utilisant une lib javascript déjà existante. Pour moi ça semble bon maintenant. Encore un énorme merci @remrem !