Changeset 77239 in spip-zone


Ignore:
Timestamp:
Oct 15, 2013, 3:09:51 PM (8 years ago)
Author:
cedric@…
Message:

On ameliore le concept qui fonctionne maintenant par enrichissement progressif en 3 couches :

  • Couche HTML
    • l'image JPG en DATA URI très compressée est affichée par défaut (affichage sans style par exemple)
  • Couche CSS
    • l'image JPG très compressée est affichée en opacité 0.7 en guise de fallback le temps que la bonne image se charge (connexion foireuse en mobilité)
    • une media-querie indique quelle image charger en fonction de la taille de la fenêtre et de la résolution de l'écran
    • la bonne image viens s'afficher par dessus le JPG de fallback quand elle arrive (en background-image dans un :after judicieusement positionné), donnant un rendu "idéal" pour le périphérique, ainsi qu'en dessous de <img> (en background-image toujours)
  • Couche JS
    • on injecte en asynchrone, quand tout est chargé (window.onload) un style qui passe le fallback JPG en opacité 0.01 et masque le :after pour afficher la background-image située en dessous de <img>. Celle-ci reste atteignable à la souris (clic droit) et affichée, lisible par les lecteurs d'écran.



Ainsi :

  • si on a pas JS on ne perd que la fonction "enregistrer cette image" mais on a un bon rendu et le contenu sémantique
  • si on a pas JS ni CSS on a l'image de fallback dégradée, qui est inclue dans le HTML
  • on a un seul hit par image (mais on paye le poids du fallback en DATA URI en plus)
  • si on a une connexion très dégradée (latence foireuse), on a reçu en un coup le contenu avec les images de fallback en DATA URI, dans le HTML, qui donnent sens au contenu sans devoir attendre chaque image qui sera longue a charger
Location:
_plugins_/respim/trunk
Files:
2 edited

Legend:

Unmodified
Added
Removed
  • _plugins_/respim/trunk/paquet.xml

    r77199 r77239  
    22        prefix="respim"
    33        categorie="multimedia"
    4         version="0.3.1"
     4        version="0.4.0"
    55        etat="dev"
    66        compatibilite="[3.0.12-dev;3.0.*]"
  • _plugins_/respim/trunk/respim_options.php

    r77199 r77239  
    2828        ksort($rwd_images);
    2929        $cid = "c".crc32(serialize($rwd_images));
    30         $style =
    31 "img.respim{opacity:0.01;max-width:100%;height:auto;}"
    32 ."b.respwrapper{background-size:100%;background-repeat:no-repeat;display:inline-block;max-width:100%}";
     30        $style = "";
    3331        if ($class) $class = " $class";
    3432        $class = "$cid$class";
     
    4947        $medias = array();
    5048        foreach ($rwd_images as $w=>$file){
     49                // $file = "filedelay.api/5/$file"; // debug : injecter une tempo dans le chargement de l'image pour tester l'enrichissement progressif
     50                // $file = $file."?rwd"; // debug  : etre sur qu'on charge bien l'image issue des medias queries
    5151                $mw = ($prev_width?"(min-width:{$prev_width}px)":"(max-width:{$w}px)");
    5252                $mw20 = ($prev_width?"(min-width:".round($prev_width/2)."px)":"(max-width:".round($w/2)."px)");
    5353                $mw15 = ($prev_width?"(min-width:".round($prev_width/1.5)."px)":"(max-width:".round($w/1.5)."px)");
    54                 // ?rwd pour le debug (etre sur qu'on charge bien l'image issue des medias queries)
    55                 $medias[$w] = "@media screen and $mw,screen and (-webkit-min-device-pixel-ratio: 2) and $mw20,screen and (-webkit-min-device-pixel-ratio: 1.5) and $mw15,screen and (min--moz-device-pixel-ratio: 2) and $mw20,screen and (min--moz-device-pixel-ratio: 1.5) and $mw15{b.$cid{background-image:url($file?rwd);}}";
     54                $medias[$w] = "@media screen and $mw,screen and (-webkit-min-device-pixel-ratio: 2) and $mw20,screen and (-webkit-min-device-pixel-ratio: 1.5) and $mw15,screen and (min--moz-device-pixel-ratio: 2) and $mw20,screen and (min--moz-device-pixel-ratio: 1.5) and $mw15{b.$cid,b.$cid:after{background-image:url($file?);}}";
    5655                $prev_width = $w+1;
    5756        }
    58         $style .= "b.$cid{background-image:url($file);}";
     57        // en premier : la plus grande image par defaut
     58        $style .= "b.$cid,b.$cid:after{background-image:url($file)}";
     59        // puis surcharge en Media Queries
    5960        $style .= implode("",$medias);
    60 
    6161
    6262        $out = "<!--[if IE]>$img<![endif]-->\n";
     
    151151                        $texte = str_replace(array_keys($replace),array_values($replace),$texte);
    152152                #var_dump(spip_timer());
     153                // les styles communs a toutes les images responsive en cours de chargement
     154                $ins = "<style type='text/css'>"."img.respim{opacity:0.70;max-width:100%;height:auto;}"
     155                ."b.respwrapper{display:inline-block;max-width:100%;position:relative;background-size:100%;background-repeat:no-repeat;}"
     156                ."b.respwrapper:after{position:absolute;top:0;left:0;right:0;bottom:0;background-size:100%;background-repeat:no-repeat;display:inline-block;max-width:100%;content:\"\"}"
     157                ."</style>";
     158                // le script qui est appele post-chargement pour finir le rendu (rend les images enregistrables par clic-droit aussi)
     159                $async_style = "html img.respim{opacity:0.01}html b.respwrapper:after{display:none;}";
     160                $ins .= "<script>window.onload = function(){"
     161                  ."var sa = document.createElement('style'); sa.type = 'text/css';"
     162                  ."sa.innerHTML = '$async_style';"
     163                  ."var s = document.getElementsByTagName('style')[0]; s.parentNode.insertBefore(sa, s);}</script>";
     164                // inserer abant le premier <script> ou <link a defaut
     165                if ($p = strpos($texte,"<link") OR $p = strpos($texte,"<script") OR $p = strpos($texte,"</head"))
     166                        $texte = substr_replace($texte,"<!--[if !IE]-->$ins<!--[endif]-->\n",$p,0);
    153167        }
    154168        return $texte;
Note: See TracChangeset for help on using the changeset viewer.