CSS를 사용하여 프런트엔드 이미지 HTTP 요청을 제어하는 ​​방법

웹 프런트엔드 이미지는 다양한 방식으로 로드되며 생성되는 HTTP 요청도 다릅니다. 여기에서는 프런트엔드 이미지에 대한 HTTP 요청을 제어하는 ​​CSS의 다양한 예를 나열합니다. 필요한 친구는 이미지에 대한

http 요청을 참조할 수 있습니다. , 상황이 많이 있는데 어떤 상황에서 요청이 발생하지 않습니까? 아래에서는 http 이미지 요청을 더 깊이 이해하는 데 도움이 되기를 바라며 사용 사례를 하나씩 나열하겠습니다.

1. 숨겨진 그림

<img  src="/static/imghwm/default1.png"  data-src="haorooms.jpg"  class="lazy"     style="max-width:90%" / alt="CSS를 사용하여 프런트엔드 이미지 HTTP 요청을 제어하는 ​​방법" >

http 요청은 다음과 같습니다.

결론: Opera에서만 요청을 생성하지 않습니다. 참고: visible:hidden을 사용하여 이미지를 숨기면 Opera에서도 요청이 생성됩니다.

2. 중복된 이미지

<img  src="/static/imghwm/default1.png"  data-src="haorooms.jpg"  class="lazy"   / alt="CSS를 사용하여 프런트엔드 이미지 HTTP 요청을 제어하는 ​​방법" >
<img  src="/static/imghwm/default1.png"  data-src="haorooms.jpg"  class="lazy"   / alt="CSS를 사용하여 프런트엔드 이미지 HTTP 요청을 제어하는 ​​방법" >

http 요청은 다음과 같습니다.

결론: 모든 브라우저는 하나의 요청만 생성합니다.

3. 반복되는 배경

<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>

http 요청은 다음과 같습니다.

결론: 모든 브라우저는 하나의 요청만 생성합니다.

4. 존재하지 않는 요소의 배경

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

http 요청은 다음과 같습니다.

결론: 적용된 요소가 페이지에 존재할 때만 배경 요청이 생성됩니다. 이는 CSS 프레임워크에 적합합니다.

5. 요소의 배경 숨기기

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

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

http 요청은 다음과 같습니다.

결론: Opera와 Firefox는 디스플레이: 없음으로 숨겨진 요소의 배경에 대해 HTTP 요청을 생성하지 않습니다. 배경 이미지는 다음 요소가 표시되지 않는 경우에만 요청됩니다: 없음.

6. 다중 배경

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

위 코드의 http 요청은 http2.jpg 이미지만 요청합니다. 그 이유는 test1 클래스가 위의 것을 덮어쓰고 후자만 요청하기 때문입니다.

CSS3에서 여러 배경 이미지 작성 방법을 사용하는 경우:

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

그러면 http 요청은 다음과 같습니다.

웹킷 엔진 브라우저는 CSS3에서 여러 배경 이미지를 지원하기 때문에 모든 배경 이미지를 요청합니다.

7. hover

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

http 요청의 백그라운드 로딩은 다음과 같습니다.

결론: hover 상태의 백그라운드는 hover가 트리거될 때만 요청됩니다. 트리거되지 않으면 기본 배경 이미지만 요청됩니다.

8. JS

<script type="text/javascript">   
    var el = document.createElement(&#39;p&#39;);   
    el.innerHTML = &#39;<img  src="/static/imghwm/default1.png"  data-src="haorooms.jpg"  class="lazy"   / alt="CSS를 사용하여 프런트엔드 이미지 HTTP 요청을 제어하는 ​​방법" >&#39;;   
    //document.body.appendChild(el); 
</script>

http 요청의 innerHTML 이미지는 다음과 같습니다.

결론: Opera만이 이미지를 즉시 요청하지 않습니다.

참고: Opera는 DOM 트리에 추가된 경우에만 요청을 보냅니다.

9. 이미지 사전 로드
가장 일반적으로 사용되는 솔루션은 JS입니다.

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

JS가 지원되지 않는 환경에서는 숨겨진 요소를 사용하여 사전 로드할 수 있습니다.

<img  src="/static/imghwm/default1.png"  data-src="haoroomscom.jpg"  class="lazy"     style="max-width:90%" / alt="CSS를 사용하여 프런트엔드 이미지 HTTP 요청을 제어하는 ​​방법" >

요약
1. 요소의 배경이 없으면 Opera는 요청을 하지 않습니다.
2. Firefox는 숨겨진 요소의 배경에 대한 요청을 생성하지 않습니다.
3. Opera는 DOM 트리에 삽입되지 않은 img 요소에 대한 요청을 생성하지 않습니다.
4. 웹킷 엔진 기반의 Safari와 Chrome은 다양한 배경 이미지를 지원합니다.
5. 다른 시나리오에서는 모든 주요 브라우저가 동일하게 유지됩니다.
위 사진 http 요청이 도움이 되었으면 좋겠습니다. 모두가 서로 소통할 수 있는 메시지를 남길 수 있습니다!

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Css를 사용하여 오른쪽 고정 너비와 왼쪽 너비를 구현하는 적응형 방법에 대해

html과 css를 사용하여 코넬 노트용 템플릿 구현

위 내용은 CSS를 사용하여 프런트엔드 이미지 HTTP 요청을 제어하는 ​​방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!