Comment utiliser CSS pour contrôler les requêtes HTTP d'images frontales-tutoriel CSS-php.cn

Comment utiliser CSS pour contrôler les requêtes HTTP d'images frontales

不言

Libérer： 2018-06-20 11:10:22

original

1846 Les gens l'ont consulté

Il existe de nombreuses façons de charger des images frontales Web, et les requêtes HTTP qu'elles génèrent sont également différentes. Nous listerons ici divers exemples de CSS contrôlant les requêtes HTTP pour les images frontales. Les amis dans le besoin peuvent s'y référer. 🎜>

Il existe de nombreuses situations pour les requêtes http d'images, alors dans quelles circonstances la requête n'aura-t-elle pas lieu ? Permettez-moi de les énumérer un par un en utilisant des cas, dans l'espoir de vous aider à comprendre en profondeur les demandes d'images http.

1. Images cachées

<img src="haorooms.jpg" style="display: none" />

Copier après la connexion

La requête http est la suivante :

2016616105558967.jpg (1067×402)

Conclusion : Uniquement Opera ne génère pas de demande. Remarque : Lors du masquage d'une image à l'aide de visibilité : masqué, une requête sera également générée sous Opera.

2. Images en double

<img src="haorooms.jpg" />
<img src="haorooms.jpg" />

Copier après la connexion

La requête http est la suivante :

2016616105640229.jpg (1264×371)

Conclusion : Toutes navigateurs Une seule requête est effectuée.

3. Répéter le fond

<style type="text/css">   
    .test1 { background: url(haorooms.jpg) }   
    .test2 { background: url(haorooms.jpg) }   
</style>   
<p class="test1">test1</p>   
<p class="test2">test2</p>

Copier après la connexion

La requête http est la suivante :

2016616105713640.jpg (1049×382)

Conclusion : Tous navigateurs Une seule requête est effectuée.

4. Contexte des éléments inexistants

<style type="text/css">   
    .test1 { background: url(haorooms.jpg) }   
    .test2 { background: url(http2.jpg) } /* 页面中没有class为test2的元素 */
</style>   
<p class="test1">test1</p>

Copier après la connexion

La requête http est la suivante :

2016616105755887.jpg (1125×326)

Conclusion : les demandes en arrière-plan ne sont effectuées que si l'élément appliqué existe sur la page. Cela a du sens pour les frameworks CSS.

5. Masquer l'arrière-plan des éléments

<style type="text/css">   
    .test1 { background: url(haorooms.jpg); display: none; }   
    .test2 { background: url(http2.jpg); visibility: hidden; }   
</style>   

<p class="test1">test1</p>

Copier après la connexion

La requête http est la suivante :

2016616105836960.jpg (1228×324)

Conclusion : Opera et Firefox ne généreront pas de requêtes HTTP pour les arrière-plans d'éléments masqués avec display: none. Une image de fond ne sera demandée que si ces éléments ne sont pas affichés : aucun.

6. Arrière-plans multiples

<style type="text/css">   
    .test1 { background: url(haorooms.jpg); }   
    .test1 { background: url(http2.jpg); }   
</style>   
<p class="test1">test1</p>

Copier après la connexion

La requête http du code ci-dessus ne demandera que l'image http2.jpg La raison est que la classe de test1 Le. ci-dessus a été écrasé, nous demandons donc uniquement la photo suivante !

Si vous utilisez plusieurs images d'arrière-plan CSS3 :

<style type="text/css">   
    .test1 { background-image:url("haorooms.jpg"),url("http2.jpg"); }   
</style>   
<p class="test1">test1</p>

Copier après la connexion

alors la requête http est la suivante :

2016616105913578.jpg (1370×346)

navigateur du moteur webkit Tous les images d'arrière-plan sont demandées car plusieurs images d'arrière-plan dans CSS3 sont prises en charge.

7. Le chargement en arrière-plan du survol

<style type="text/css">   
    a.test1 { background: url(haorooms.jpg); }   
    a.test1:hover { background: url(http2.jpg); }   
</style>   
<a href="#" class="test1">test1</a>

Copier après la connexion

la requête http est la suivante :

2016616105947450.jpg (1203×343)

Conclusion : Déclenchez le survol, l'arrière-plan en état de survol sera demandé. Si elle n'est pas déclenchée, seule l'image d'arrière-plan par défaut est demandée.

8. Images en innerHTML dans JS

<script type="text/javascript">   
    var el = document.createElement(&#39;p&#39;);   
    el.innerHTML = &#39;<img src="haorooms.jpg" />&#39;;   
    //document.body.appendChild(el); 
</script>

Copier après la connexion

La requête http est la suivante :

2016616110110394.jpg (1257×329)

Conclusion : uniquement Opera ne demandera pas de photos immédiatement.

Remarque : Opera n'enverra la requête que lorsqu'elle sera ajoutée à l'arborescence DOM.

9. Préchargement des images
La solution la plus couramment utilisée est JS :

<script type="text/javascript">   
    new Image().src = &#39;haorooms.jpg&#39;;   
    new Image().src = &#39;http2.jpg&#39;;   
</script>

Copier après la connexion

Dans un environnement sans support JS, des éléments cachés peuvent être utilisés pour précharger Chargement :

<img src="haoroomscom.jpg" style="visibility: hidden; height: 0; width: 0" />

Copier après la connexion

Résumé
1. Opera ne générera pas de demandes d'images cachées ni d'arrière-plans d'éléments cachés. 2. Firefox ne générera pas de requêtes pour l'arrière-plan des éléments masqués.
3. Opera ne générera pas de requête pour les éléments img qui n'ont pas été insérés dans l'arborescence DOM.
4. Safari et Chrome basés sur le moteur Webkit prennent en charge plusieurs images d'arrière-plan.
5. Dans d'autres scénarios, tous les principaux navigateurs restent les mêmes.
J'espère que la demande http d'image ci-dessus vous sera utile, tout le monde peut laisser des messages pour communiquer entre eux !

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

Recommandations associées :

À propos de la méthode adaptative du CSS pour implémenter une largeur fixe à droite et une largeur à gauche

Utiliser HTML et CSS pour implémenter le modèle de note Cornell

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!