itsource

"display:none"이 이미지 로드를 방해합니까?

mycopycode 2023. 7. 31. 21:22
반응형

"display:none"이 이미지 로드를 방해합니까?

대응하는 모든 웹 사이트 개발 튜토리얼은 다음을 사용할 것을 권장합니다.display:none웹 사이트가 더 빨리 로드되도록 모바일 브라우저에서 콘텐츠가 로드되지 않도록 숨기기 위한 CSS 속성입니다.그게 사실인가요? 있습니까?display:none이미지를 로드하지 않거나 모바일 브라우저에 콘텐츠를 로드합니까?모바일 브라우저에서 불필요한 콘텐츠를 로드하는 것을 방지할 수 있는 방법이 있습니까?

브라우저는 점점 더 똑똑해지고 있습니다.오늘날 브라우저(버전에 따라)는 이미지 로드가 유용하지 않다고 판단될 경우 이미지 로드를 건너뛸 수 있습니다.

이미지에 다음이 있습니다.display:none스타일이지만 크기는 스크립트에서 읽을 수 있습니다.상위 항목이 숨겨져 있으면 Chrome v68.0에서 이미지를 로드하지 않습니다.

http://jsfiddle.net/tnk3j08s/ 에서 확인하실 수 있습니다.

브라우저의 개발자 도구의 "네트워크" 탭을 보고 확인할 수도 있었습니다.

브라우저가 작은 CPU 컴퓨터에 있는 경우 이미지를 렌더링(및 페이지 레이아웃)하지 않아도 전체 렌더링 작업이 더 빨라집니다. 하지만 이것이 오늘날 정말 말이 되는 것인지 의심스럽습니다.

요소를 할 수 .src 다리탓으에 대한 ."data:"또는"about:blank").

이미지를 CSS에서 div의 배경 이미지로 만드는 경우, 해당 div가 "display: none"으로 설정되면 이미지가 로드되지 않습니다.CSS가 비활성화되어 있어도 CSS가 비활성화되어 있기 때문에 로드되지 않습니다.

답은 간단한 예나 아니오만큼 쉽지 않습니다.최근에 수행한 테스트 결과를 확인하십시오.

  • 크롬의 경우:모든 8개 스크린샷-* 이미지 로드(img 1)
  • Firefox에서: 현재 표시 중인 1개의 스크린샷-* 이미지만 로드됨(img 2)

그래서 더 파고든 후에 이것을 발견했는데, 이것은 각 브라우저가 CSS 디스플레이를 기반으로 한 로딩 img 자산을 어떻게 처리하는지 설명합니다: 없음;

블로그 게시물에서 발췌:

  • Chrome » Safari(WebKit):
    WebKit는 일치하지 않는 미디어 쿼리를 통해 배경이 적용된 경우를 제외하고 매번 파일을 다운로드합니다.
  • 파이어폭스:
    파이어폭스는 스타일이 숨겨져 있으면 배경 이미지와 함께 호출된 이미지를 다운로드하지 않지만 img 태그에서 자산을 다운로드합니다.
  • 오페라:
    파이어폭스가 하는 것처럼 오페라는 쓸모없는 배경 이미지를 로드하지 않을 것입니다.
  • Internet Explorer:
    IE와 마찬가지로 WebKit는 디스플레이가 있더라도 배경 이미지를 다운로드합니다. 없음; IE6과 함께 이상한 것이 나타납니다. 배경 이미지와 디스플레이가 있는 요소: 인라인으로 설정된 것이 하나도 다운로드되지 않습니다.하지만 그 스타일들이 인라인으로 적용되지 않는다면 그렇게 될 것입니다.

Chrome- All 8 screenshot-* images loaded

Firefox- Only the 1 screenshot-* image loaded that is currently being displayed

HTML5<picture>하는 데 .

브라우저 동작은 지난 5년 동안 크게 변하지 않았고 많은 사람들이 여전히 숨겨진 이미지를 다운로드할 것입니다.display: none그들에게 부과된 재산.

미디어 쿼리 해결 방법이 있더라도 이미지가 CSS에서 배경으로 설정된 경우에만 유용할 수 있습니다.

문제(느린 로드, 그림 채우기 등)에 대한 JS 솔루션이 있다고 생각하던 중 HTML5와 함께 박스에서 나오는 멋진 순수 HTML 솔루션이 있는 것처럼 보였습니다.

은 그고그것은리▁the입니다.<picture>꼬리표를 달다

MDN의 설명은 다음과 같습니다.

HTML 요소는 여러 개를 지정하는 데 사용되는 컨테이너입니다.<source> 특요소에 <img>그 안에 포함되어 있습니다.브라우저는 페이지의 현재 레이아웃(이미지가 표시될 상자의 제약 조건)과 표시될 장치(예: 일반 또는 hiDPI 장치)에 따라 가장 적합한 소스를 선택합니다.

사용 방법은 다음과 같습니다.

<picture>
 <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
 <img src="mdn-logo-narrow.png" alt="MDN">
</picture>

이면의 논리

는 브저가로드다의 합니다.img태그(미디어 규칙이 적용되지 않는 경우에만 해당). 때.<picture>. 는 다시 요가브지않습다니지원을 하는 . 요소는 다시 표시됩니다.img꼬리표를 달다

일반적으로 가장 작은 이미지를 소스로 사용합니다.<img>더 큰 화면에서는 무거운 이미지를 로드하지 않습니다.적용될 는 반로미적경소우는스는되대용규이<img> 대신 로드되의않고지해, 당콘대를 URL다의 URL 합니다.<source>꼬리표를 달다

여기서 유일한 함정은 요소가 브라우저에서 지원되지 않는 경우 작은 이미지만 로드된다는 것입니다.반면 2017년에는 모바일 최초의 접근 방식으로 생각하고 코딩해야 합니다.

그리고 누군가가 너무 빠지기 전에, 여기에 현재 지원되는 브라우저가 있습니다.<picture>:

데스크톱 브라우저

Desktop browsers support

모바일 브라우저

Mobile browsers support

브라우저 지원에 대한 자세한 내용은 사용 가능에서 확인할 수 있습니다.

좋은 점은 html5 please의 문장은 폴백과 함께 사용하는 것입니다.그리고 저는 개인적으로 그들의 조언을 들을 생각입니다.

W3C 사양에서 찾을 수 있는 태그에 대한 자세한 내용은 다음과 같습니다.여기에는 면책 조항이 있는데, 이를 언급하는 것이 중요하다고 생각합니다.

그picture요소가 유사한 모양과 다소 다릅니다.video그리고.audio요소들.그들 모두가 포함하고 있는 동안source의 요소, 요소의src▁a▁within▁is에 중첩되어 때 은 의미가 .picture리소스 선택 알고리즘이 다릅니다.한, 그.picture는 아무것도. 는 포함된 요소에 할 뿐입니다. 요소는 포함된 컨텍스트를 제공할 뿐입니다.img여러 URL 중에서 선택할 수 있는 요소입니다.

따라서 이미지를 로드할 때 일부 컨텍스트를 제공하여 성능을 향상시킬 수 있습니다.

그리고 작은 장치에서 이미지를 숨기기 위해 CSS 마법을 사용할 수 있습니다.

<style>
  picture { display: none; }

  @media (min-width: 600px) {
    picture {
      display: block;
    }
  }
</style>

<picture>
 <source srcset="the-real-image-source" media="(min-width: 600px)">
 <img src="a-1x1-pixel-image-that-will-be-hidden-in-the-css" alt="MDN">
</picture>

따라서 브라우저는 실제 이미지를 표시하지 않고 다운로드만 합니다.1x1픽셀 이미지(두 번 이상 사용하는 경우 캐시할 수 있음).하만지, 약에에, 만약만이 하시기 바랍니다.<picture>태그는 브라우저에서 지원되지 않으며, 데스크톱 화면에서도 실제 이미지가 표시되지 않습니다(따라서 반드시 폴리필 백업이 필요합니다).

2023년 업데이트:

display: none그렇지는 않지만,loading=lazy합니다!

브라우저는 이미지를 직접 또는 간접적으로 숨겼음에도 불구하고 여전히 다운로드합니다.display: none소유물.이를 방지하는 유일한 표준 방법은 다음을 사용하는 것입니다.

<img src="https://cdn.example/image.jpg" loading="lazy">

브라우저에서 정의한 대로 뷰포트에서 계산된 거리에 도달할 때까지 이미지 로드를 연기합니다.이미지가 필요하다는 것이 확실해질 때까지 이미지를 처리하는 데 필요한 네트워크 및 스토리지 대역폭을 피하는 것이 목적입니다.이는 일반적으로 대부분의 일반적인 사용 사례에서 컨텐츠의 성능을 향상시킵니다.

모든 최신 데스크톱 및 모바일 웹 브라우저가 이를 지원합니다.

2019년 정답 **

인 display:none것을 하지 않습니다.

/*will be downloaded*/

#element1 {
    display: none;
    background-image: url('https://picsum.photos/id/237/100');
}

가 하만만조요상소가약지를 가지고 ,display:none후손의 .


/* Markup */

<div id="father">
    <div id="son"></div>
</div>


/* Styles */

#father {
    display: none;
}

/* #son will not be downloaded because the #father div has display:none; */

#son {
    background-image: url('https://picsum.photos/id/234/500');
}

이미지 다운로드를 방해하는 기타 상황:

1 - 대상 요소가 존재하지 않습니다.

/* never will be downloaded because the target element doesn't exist */

#element-dont-exist {
    background-image: url('https://picsum.photos/id/240/400');
}

2 - 서로 다른 이미지를 로드하는 두 개의 동일한 클래스

/* The first image of #element2 will never be downloaded because the other #element2 class */

#element2 {
    background-image: url('https://picsum.photos/id/238/200');
}

/* The second image of #element2 will be downloaded */

#element2 {
    background-image: url('https://picsum.photos/id/239/300');
}

https://codepen.io/juanmamenendez15/pen/dLQPmX 에서 직접 확인하실 수 있습니다.

예, 이미지를 렌더링할 필요가 없고 화면에서 정렬할 요소가 하나 줄어들기 때문에 조금 더 빠르게 렌더링됩니다.

할 수 . 에는 html을 포함합니다.<img>꼬리표를 달다

파이어버그나 와이어샤크는 파이어버그나 와이어샤크를 사용해도 알 수 .display:none존재합니다.

디스플레이가 없음으로 설정된 경우 이미지를 로드하지 않는 브라우저는 Opera뿐입니다. 이제 Opera가 웹킷으로 이동했으며 디스플레이가 없음으로 설정된 경우에도 모든 이미지를 렌더링합니다.

다음은 이를 증명하는 테스트 페이지입니다.

http://www.quirksmode.org/css/displayimg.html

Quirks 모드: 영상 및 디스플레이: 없음

이미지가 다음과 같은 경우display: none또는 를 가진 요소 내부에 있습니다.display:none브라우저는 다음 시간까지 이미지를 다운로드하지 않는 것을 선택할 수 있습니다.display이 다른 값으로 설정됩니다.

Opera만 이미지를 다운로드합니다.displayblock다른 모든 브라우저는 즉시 다운로드합니다.

div를 'display:none'으로 설정하면 div 요소의 배경 이미지가 로드됩니다.

어쨌든 동일한 div에 부모가 있고 해당 부모가 'display:none'으로 설정되어 있으면 자식 요소의 배경 이미지가 로드되지 않습니다. :)

부트스트랩 사용 예:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div class="col-xs-12 visible-lg">
	<div style="background-image: url('http://via.placeholder.com/300x300'); background-repeat:no-repeat; height: 300px;">lg</div>
</div>
<div class="col-xs-12 visible-md">
	<div style="background-image: url('http://via.placeholder.com/200x200'); background-repeat:no-repeat; height: 200px;">md</div>
</div>
<div class="col-xs-12 visible-sm">
	<div style="background-image: url('http://via.placeholder.com/100x100'); background-repeat:no-repeat; height: 100px">sm</div>
</div>
<div class="col-xs-12 visible-xs">
	<div style="background-image: url('http://via.placeholder.com/50x50'); background-repeat:no-repeat; height: 50px">xs</div>
</div>

이미지를 CSS에서 div의 배경 이미지로 만들면 해당 div가 'display: none'으로 설정되어 있으면 이미지가 로드되지 않습니다.

브렌트의 솔루션을 확장하는 중입니다.

순수 CSS 솔루션에 대해 다음을 수행할 수 있습니다. 또한 img 상자가 반응형 설계 설정(투명 png의 목적)에서 실제로 img 상자처럼 동작하도록 합니다. 이는 설계가 반응형 동적 크기 조정 이미지를 사용하는 경우 특히 유용합니다.

<img style="display: none; height: auto; width:100%; background-image: 
url('img/1078x501_1.jpg'); background-size: cover;" class="center-block 
visible-lg-block" src="img/400x186_trans.png" alt="pic 1 mofo">

visible-lg-block에 연결된 미디어 쿼리가 트리거되고 display:none이 display:block으로 변경된 경우에만 영상이 로드됩니다.투명 png는 브라우저가 유체 설계(높이: 자동, 너비: 100%)에서 <img> 블록(및 배경 이미지)에 적합한 높이:폭 비율을 설정할 수 있도록 하는 데 사용됩니다.

1078/501 = ~2.15  (large screen)
400/186  = ~2.15  (small screen)

따라서 3개의 서로 다른 뷰포트에 대해 다음과 같은 결과를 얻을 수 있습니다.

<img style="display: none; height: auto; width:100%; background-image: url('img/1078x501_1.jpg'); background-size: cover;" class="center-block visible-lg-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/517x240_1.jpg'); background-size: cover;" class="center-block visible-md-block" src="img/400x186_trans.png" alt="pic 1">
<img style="display: none; height: auto; width:100%; background-image: url('img/400x186_1.jpg'); background-size: cover;" class="center-block visible-sm-block" src="img/400x186_trans.png" alt="pic 1">

또한 초기 로드 중에는 기본 미디어 뷰포트 크기 이미지만 로드되고 이후에는 뷰포트에 따라 이미지가 동적으로 로드됩니다.

Javascript도 없습니다!

그렇다면 모바일 브라우저에 불필요한 콘텐츠를 로드하지 않는 방법이 있습니까?

사용하다<img src="" srcset="">

http://www.webdesignerdepot.com/2015/08/the-state-of-responsive-images/

https://caniuse.com/ #vmdk=srcset

리소스를 가져오지 않으려면 웹 구성요소의 요소를 사용합니다.

@media query CSS를 사용합니다. 기본적으로 우리는 옆에 있는 데스크톱에 거대한 트리 이미지가 있지만 테이블/모바일 화면에는 표시되지 않는 프로젝트를 출시합니다.이미지 로드를 방지합니다.

다음은 작은 토막글입니다.

.tree {
    background: none top left no-repeat; 
}

@media only screen and (min-width: 1200px) {
    .tree {
        background: url(enormous-tree.png) top left no-repeat;
    }
}

동일한 CSS를 사용하여 디스플레이/가시성/불투명도로 표시하고 숨길 수 있지만 이미지를 로드하는 중이었고, 이것이 우리가 생각한 가장 많은 오류 안전 코드였습니다.

안녕하세요, 저도 같은 문제로 고민하고 있었습니다. 모바일에 이미지를 로드하지 않는 방법입니다.

하지만 저는 좋은 해결책을 찾았습니다.먼저 img 태그를 만든 다음 src 속성에 빈 svg를 로드합니다.이제 url('link to your image'); 내용을 사용하여 이미지에 대한 URL을 인라인 스타일로 설정할 수 있습니다.이제 img 태그를 원하는 포장지에 싸십시오.

<div class="test">
  <img src="data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/‌​svg%22/%3E" style="content:url('https://blog.prepscholar.com/hubfs/body_testinprogress.gif?t=1495225010554')">
</div>

  @media only screen and (max-width: 800px) {
      .test{
       display: none;
      }
    }

이미지를 로드하지 않을 중단점에 아무것도 표시하지 않도록 래퍼를 설정합니다.이제 img 태그의 인라인 css는 무시됩니다. 왜냐하면 표시 없음이 있는 래퍼로 포장된 요소의 스타일이 무시되기 때문입니다. 따라서 래퍼가 표시 블록을 가진 중단점에 도달할 때까지 이미지가 로드되지 않습니다.

자, 모바일 브레이크포인트에 img를 로드하지 않는 정말 쉬운 방법입니다 :)

다음 코드펜을 확인하십시오. 작동 예는 http://codepen.io/fennefoss/pen/jmXjvo 입니다.

아니요. 이미지는 정상적으로 로드되며 휴대 전화 사용자 대역폭 절약을 고려하는 경우에도 사용자 대역폭을 계속 사용합니다.미디어 조회를 사용하여 이미지를 로드할 장치를 필터링할 수 있습니다.이미지 태그는 화면 크기와 미디어 쿼리 설정에 관계없이 이미지를 로드하므로 이미지를 태그가 아닌 div 등의 배경 이미지로 설정해야 합니다.

우리는 모바일에서 이미지를 로드하지 않는 것에 대해 이야기하고 있습니다. 그렇죠? 그렇다면 만약 당신이 @media(최소 너비: 400인치){background-image: thing.jpg}을(를) 했다면 어땠을까요?

그러면 특정 화면 너비 이상의 이미지만 찾지 않을까요?

다른 은 또다가다같습다니음과은을 하는 입니다.<noscript>를 그를지정이내배부치다니합에 안에 합니다.<noscript>tag.하여 그태를 합니다. 그런 다음 Javascript를 사용하여 제거합니다.noscript이미지가 필요할 때 태그를 지정합니다.이러한 방식으로 점진적 향상 기능을 사용하여 필요에 따라 이미지를 로드할 수 있습니다.

가 쓴 이해서 가내쓴이폴사내용읽용습다니을의 .<noscript>IE8의 태그

https://github.com/jameswestgate/noscript-textcontent

이미지가 없는 디스플레이를 사용하는 비결은 ID를 할당하는 것입니다.작동하는 데 필요한 코드가 많지 않기 때문입니다.다음은 미디어 쿼리와 3가지 스타일시트를 사용한 예입니다.하나는 전화용, 하나는 태블릿용, 하나는 데스크톱용입니다.저는 핸드폰, 태블릿, 데스크톱 3개의 이미지를 가지고 있습니다.전화 스크린에는 전화 이미지만 표시되고 태블릿에는 태블릿 이미지만 표시되며 데스크톱 컴퓨터 이미지에는 데스크톱이 표시됩니다.작동하기 위한 코드 예제는 다음과 같습니다.

소스 코드:

<div id="content">
<img id="phone" src="images/phone.png" />
<img id="tablet" src="images/tablet.png" />
<img id="desktop" src="images/desktop.png" />
</div>

미디어 쿼리가 필요 없는 전화 CSS.img#phone이 작동합니다.

img#phone {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }

img#tablet {display: none;}
img#desktop {display: none;}

태블릿 CSS:

@media only screen and (min-width: 641px) {
img#phone {display: none;}

img#tablet {
    display: block;
    margin: 6em auto 0 auto;
    width: 70%;
    }
}

그리고 데스크톱 CSS:

@media only screen and (min-width: 1141px) {
img#tablet {display: none;}

img#desktop {
    display: block;
    margin: 6em auto 0 auto;
    width: 80%;
    }
}

행운을 빌어요. 그리고 그것이 어떻게 당신에게 효과가 있는지 알려주세요.

언급URL : https://stackoverflow.com/questions/12158540/does-displaynone-prevent-an-image-from-loading

반응형

'itsource' 카테고리의 다른 글

도커 이미지의 로그를 보는 방법은 무엇입니까?  (0) 2023.07.31
자바스크립트를 시작할 때 세미콜론을 시작하는 목적은 무엇입니까?  (0) 2023.07.31
NSA ray를 NSData로 변환하는 방법은 무엇입니까?  (0) 2023.07.31
저장 프로시저에서 권한을 찾기 위한 오라클 쿼리  (0) 2023.07.31
Cordova 명령줄 인터페이스를 사용하여 서명된 APK 파일을 만드는 방법은 무엇입니까?  (0) 2023.07.31

'itsource'의 다른글

  • 현재글"display:none"이 이미지 로드를 방해합니까?

관련글

댓글

티스토리툴바