'display:none'은 최신 브라우저에서 이미지 로딩을 방지합니까?

이미지 로딩에 대한 "display:none"의 영향 공개

반응형 웹 디자인 옹호자들은 종종 "display:none" CSS에 의존합니다. 모바일 브라우징 경험을 향상시키는 속성입니다. 그러나 중요한 질문이 생깁니다. 이 속성이 이미지 로드를 방지합니까, 아니면 여전히 백그라운드에서 이미지를 가져오는 것입니까?

밝혀진 진실: 진화하는 브라우저

처음에는 , 이미지의 "표시"를 "없음"으로 설정하면 로드에 영향을 주지 않고 숨길 수 있습니다. 그러나 최신 브라우저는 더욱 지능화되었습니다. 이제 페이지의 표시되는 부분에 이미지가 불필요한 경우를 감지하고 로드를 건너뛸 수 있습니다.

특히 Chrome에는 이미지의 상위 요소가 숨겨진 경우 이미지 로드를 방지하는 기능이 있습니다. 이 동작은 http://jsfiddle.net/tnk3j08s/에서 확인할 수 있습니다.

로딩 방지를 위한 대체 접근 방식

이미지 로딩을 완전히 방지하려는 경우 , 다음 대안을 고려하십시오.

• IMG 요소: 문서에서 IMG 요소를 제외하면 됩니다.
• IMG 소스 수정: 이를 방지하려면 IMG의 src 속성을 "data:" 또는 "about:blank"로 업데이트하세요. 실제 이미지를 가져옵니다.

중요 참고

위 전략이 효과적으로 작동하려면 이미지가 초기 화면에 표시되거나 느리게 로드되어서는 안 됩니다. 이러한 조건이 충족되지 않으면 이미지가 로드되지만 숨겨질 수 있습니다.

위 내용은 'display:none'은 최신 브라우저에서 이미지 로딩을 방지합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!