Astuces PHP lazy load sous joomla seblod warp
8629 vues
02 juin 2015
Raphaëlle
Voici un petit tutoriel en relation avec nos formations sur le templating Joomla!
Trier un array php par rapport aux tailles des chaines le composant (du plus grand au plus petit)
en gardant les keys associées
function tri_taille_chaine($chaine1, $chaine2)
{
$taille1 = strlen($chaine1);
$taille2 = strlen($chaine2);
if ($taille1 == $taille2)
{
return strcmp($chaine1, $chaine2);
}
return ($taille1 < $taille2) ? -1 : 1;
}
uasort($listTitle, 'tri_taille_chaine');
$listTitle = array_reverse($myArray, true);
remplacer toutes les occurences d'une string SAUF la première rencontrée
$str = 'my string is a string very usesful';
$replace='string';
$to='strong';
$pos = strpos($str,$replace);
$strlen=strlen($replace);
if ($pos !== false) {
$str = substr($str,0,$pos+$strlen) . str_replace($key,$to,substr($str,$pos+$strlen));
//'my string is a strong very usesful';
}
Petit fix amusant
sous IE9, mon script JS ne fonctionnait que si j'activais au moins une fois la console F12... WTF ???
En fait, après avoir recherché sur le net, on me dit que l'objet "console" n'est pas initialisé sous IE9 et qu'il bloque le script si on ne l'inialise pas en ouvrant le firebug IE. J'ai donc retiré tout mes console du code, même résultat... j'ai donc trouvé ce fix, et maintenant, mon code fonctionne à merveille :)
plutôt cocasse ;)
pour adapter vos images de site à la taille du navigateur, et les mettre en cache
ce qui est un gain de temps considérable au chargement de la page, je vous conseille de vous mettre à l'adaptive image... 5 minutes d'installation, rien de compliqué sous joomla !
mettre le fichier adaptive-image.php à la racine du site (que vous pouvez récupérer ici : https://adaptive-images.com/
modifier le .htacces en rajoutant une seule ligne :
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
créer un dossier ai-cache à la racine toujours, et le tour est joué !!!
Dernière astuce,
l'installation de lazyload pour ne charger les images de la page qu'au scroll de celle-ci
gain de temps certain au chargement de la page (c'est qu'on a le souci de l'optimisation à Pulsar :) )
pas compliqué sous joomla : si vous utilisez SEBLOD et le générateur de template warp, c'est extrêmement simple (et si vous ne les utilisez pas, le principe est le même)
bon déjà, téléchargez le fichier jquery.lazyload.min.js qu'on peut entre autre trouver ici https://github.com/tuupola/jquery_lazyload et mettre ce fichier dans votre répertoire js de votre template templates\myTemplate\styles\picardie-muses\jsajouter l'appel des fichiers au theme.config.php
$this['asset']->addFile('js', 'js:jquery.lazyload.min.js');
$this['template']->set('head', '
');
petite chose amusante, sous IE, j'ai des problèmes, il ne reconnais pas mon addFile... je ne m'en suis rendu compte que bien plus tard. So, no panic, on rajoute ces quelques lignes
// internet explorer
if ($this['useragent']->browser() == 'msie') {
$head[] = sprintf('
', $this['path']->url('js:jquery.lazyload.min.js'));
$head[] = sprintf('
', '');
}
ensuite, remplacer cette ligne dans le plugin de typo image.php qui se trouve dans plugins/cck_field_typo/image/image.php
DONC on lui dit que si dans seblod, on a mis la class "superlazy" au champ avec le plugin de typo image, on ajoute une classe et un data-original... et le script fait le reste ! Le lazyload ce fera sur ces champs la uniquement ! et ça c'est quand même super pratique :)
Et 'oilou les gens :) j'espère que ces quelques astuces vous serviront tôt ou tard :)
ha oui, et ça, c'est mon compte google + y' a encore plein d'autres des astuces du même acabit :)