Enlever images du DOM (version mobile)

Bonjour,

je voudrais commenter avec vous une méthode que j'essaie de mettre en place dans un contexte de de site web à taille fixe, sur lequel j'ai greffé, avec une media query, une feuille de style pour une version 'mobile' (screen =< 568 px)

Dans une page du site, j'ai une série de <div> contenant des personnes.
comme ceci:

    <div id="pv-block" class="module-equipe odd first-module-equipe">
        <div class="sub-equipe">    
            <img id="pv-img-1" class="mugshot" src="images/equipe/patrick-xxx-1.jpg" >
			<!-- image à supprimer en version mobile -->
            <img id="pv-img-2" class="removable mugshot" src="images/equipe/patrick-xxx-2.jpg" >
            <div class="block-name">
                <img class="icon-team" src="images/equipe/icon-boss-light.gif" width="50" height="49">
            	<h2>Patrick xxx</h2>
                <blockquote>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. </blockquote>
            </div>
        </div>
        <a href="#" title="open" class="lireSuite both">voir la biographie.</a>
        <div class="laSuite">
			<!-- image à supprimer en version mobile -->
            <img id="pv-img-3" class="removable bio-img" src="images/equipe/patrick-xxx-3.jpg" >
            <div class="block-bio">
                <p><span>Patrick xxx:</span> Et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio</p>
            </div>
        </div>
    <!-- fin module-equipe --></div>

au niveau du js, je gère la taille de cette façon:

	var windowState = 'large';
	
	// check intital width of the screen, respond with appropriate menu
		var sw = document.body.clientWidth;
		if (sw < 569) {
		   smMenu();
		}
	// take care of resizing the window
	$(window).resize(function() {
		var sw = document.body.clientWidth;
		if (sw < 569 && windowState != 'small') {
		   smMenu();
		}
		if (sw > 568 && windowState != 'large') {
		   lgMenu();
		} 

	});

les fonctions smMenu() et lgMenu() modifient et rétablissent respectivement le menu, pour qu'il soit escamotable dans la version mobile.
Dans le css il y a une media-query pour charger le CSS ad-hoc dans la version mobile.

pour la version Desktop, il y a 3 images par personne
pour la version mobile je ne veux en afficher (et donc en charger) qu'une: la première.

voici la solution que j'ai trouvée:

- le site se charge initialement avec le code pour la version desktop
- si le js détecte une taille <569 j'enlève les image qui possèdent la classe remove

	function smMenu() {

	// ici du code pour gérer le menu mobile
		
	$(".removable").remove();
		
	//indicate current window state
	windowState = 'small';
	
	}

- si le js détecte une taille >568 rien ne se passe
- si l'écran est redimensionné de 'small' vers 'large' (cas hyper rare) je réinjecte les images dans le code..

	function smMenu() {

	// ici du code pour rétablir le menu 'desktop'


		// réimplantation des images (autant de fois quede personnes)
		$("#pv-block").find("#pv-img-1")
			.after('<img id="pv-img-2" class="removable mugshot" src="images/equipe/patrick-xxx-2.jpg" >')
			.end()
			.find(".laSuite")
			.prepend('<img id="pv-img-3" class="removable bio-img" src="images/equipe/patrick-xxx-3.jpg" >');
	
		
		//indicate current window state
		windowState = 'large';
		
	}

Je pense que dans mon cas c'est le meilleur compromis.... ainsi les images 2 et 3 ne sont pas chargées pour un mobile et on gagne de la bande passante.....

Pour les puristes.... je sais qu'il existe des technique 'mobile first' mais la je n'ai pas le choix, le site est existant... il a une taille fixe et n'est pas 'élastique'

merci pour vos retours...
Modifié par lionel_css3 (09 Dec 2014 - 18:09)

salut,
et qu'est-ce qui te dit que les images ne se chargent pas avant ton JS ?
Tu pourrais aussi insérer des images blanches de 1x1 px (ou des gifs de chargement) et de les remplacer via JS, tout en prévoyant un système de chargement sans (avec <noscript> ?).
Mais comme tu dis, c'est assez "rigide" comme méthode.

ben comme jQuery agit dès que le DOM est formé..... le js a le temps d'agir avant que les images soient chargées, non?? enfin je suppose...
il faudrait que je teste avec firebug onglet réseau....

ouai c'est bizarre...
si je recharge la page en version 'mobile' le code html ne contient qu'une image mais dans l'onglet réseau de firebug il affiche toutes les images........

ceci dit quand je recharge la page il affiche le code html originel....
Modifié par lionel_css3 (09 Dec 2014 - 19:47)