스마트 폰에서 이미지를 다운로드하지 않습니다.

전체 크기 웹 사이트에 배경 이미지가있는 슬라이드 쇼가있는 회사의 경우 반응 형 웹 사이트를 개발 중입니다 (Backstretch으로 화면 전체 채우기). 이미지가 꽤 크기 때문에 (약 300k), 스마트 폰에서 사이트를 볼 때 이미지가로드되지 않도록하는 방법을 찾고 있습니다.스마트 폰에서 이미지를 다운로드하지 않습니다.

미디어 쿼리를 사용하여 backstretch div에 display: none과 visibility: hidden을 적용했습니다. 그것은 이미지를 숨기지 만 여전히 다운로드중인 것처럼 보입니다. 브라우저에서 모두 무시하도록하는 현명한 방법이 있습니까?

출처

2012-04-30 Anders Norén

CSS를 통해 이미지를 설정하는 경우 방법이 있습니다. 당신은 DIV 표시 설정하면

: 여전히 다운로드합니다 없음을, 당신은 다음 없음을 표시하지 않을 부모 DIV를 설정하면 그러나 그것은 설정하는 미디어 쿼리 화재 때까지로드되지 않습니다

CSS

팀 카들 렉에

.parent {display:block;} 
.background {background-image:url(myimage.png);} 

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

HTML

<div class="parent"> 
    <div class="background"></div> 
</div>

에서 모자 팁 - http://timkadlec.com/2012/04/media-query-asset-downloading-results/

출처

2012-05-01 10:14:28 justinavery

정확히 내가 뭘 찾고 있었는지, 고마워! –

여전히 이미지를로드합니다. 올바른지? – praaveen

@praaveen 미디어 쿼리가 실행되면 (이미지 컨테이너의 부모 요소가 표시되지 않도록 설정되어 있기 때문에) – justinavery

visibility 및 display은 이미지 다운로드 여부와 관계가 없습니다. 사용자가 할 수있는 유일한 방법은 모든 이미지를 배경 이미지로 사용하고 미디어 쿼리를 사용하여 대체 스타일 시트에서 이미지를 완전히 제외시키는 것입니다.

출처

2012-04-30 19:12:01

배경 이미지를 표시하는 데 사용하는 Backstretch jQuery 플러그인은 이미지를 닫는 body 태그 바로 위에있는 div에 넣습니다. 배경 크기를 조정할 때 배경 크기를 사용해 보았습니다.하지만 Chrome에서 강력한 기능을 제공하며 이전 브라우저에서는 지원되지 않습니다. 나는 [여기] (http://www.andersnoren.se/private/272/uppdrag/rbj/) 페이지를 업로드했습니다. Backstretch를 제거하지 않고이 작업을 수행 할 수있는 방법이 있습니까? –

또 다른 옵션은 모바일 용 기본 스타일을 정의하고 더 큰 화면 너비의 미디어 쿼리에서이를 우선 적용하는 것입니다.

이미지를 방지 할 수 있습니다 다음과 같은 뭔가가 모바일 장치에 다운로드하고, 또한 불필요한 래퍼 사업부 :

HTML에 대한 필요성 방지되고 :

<div class="container"> 
    <!-- slideshow container --> 
</div>

CSS :

/* default to no background image */ 
.container { 
    background-image: none; 
} 

/* add it in for wider screens */ 
@media screen and (min-width: 500px) { 
    .container { 
     background-image: url(myimage.png); 
    } 
}

을

출처

2012-07-06 05:09:46 okyanet

스마트 폰에서 이미지를 다운로드하지 않습니다.

답변

관련 문제