Peut une feuille de style pour ordinateurs de poche sauter le chargement des images

Question

J'ai une feuille de style pour les ordinateurs de bureau, et un autre pour les ordinateurs de poche. La page Web affiche des images lors de l'affichage sur le bureau, mais cache les images lorsqu'elles sont affichées sur les ordinateurs de poche. La page apparaît comme conçu pour les ordinateurs de bureau et ordinateurs de poche.

Quand je vérifie les journaux du serveur, je trouve que l'ordinateur de poche est en fait de charger encore les images, mais pas les afficher. Y at-il un moyen d'arrêter l'ordinateur de poche de chargement des images tout à fait, car il ne les ont pas besoin, sans avoir à maintenir deux ensembles de pages web? Peut-il être fait en utilisant seulement les feuilles de style?

Merci d'avance.

Ray Mond

Answer 1

Inclure les images que vous ne souhaitez pas afficher sur les appareils mobiles comme l'image d'arrière-plan. Dans la feuille de style du navigateur, vous pouvez alors utiliser

.element { 
    background: #FFF url('image.png') no-repeat left top; /* or whatever */
}

alors que dans la feuille de style que vous venez de poche ne définissez pas une image d'arrière-plan, donc, selon l'utilisation exacte, vous pouvez utiliser

.element {
    display: none;
}

ou

.element { 
    background: #FFF;
}

Cependant, il ne sera pas possible de supprimer les images que vous joindre à <img src="" /> ensuite par des règles CSS (juste display: none etc, mais cela ne les empêche pas de se charger, comme vous avez remarqué).

Answer 2

Envoyer votre feuille de style par tête HTTP avant le balisage:

Link: <compact.css>; rel="stylesheet"; media="handheld"

Ensuite, le navigateur portable le plus utilisé - Opera - ne charge pas les images. WebKit (Safari) fait encore, mais - même les images de fond pour les éléments cachés