2012-12-23 4 views
0

나는 에서 http://fancybox.net/의 jQuery 플러그인을 사용하고 있으며 기본적으로 "숨겨진 갤러리"에 사용하고 있습니다. 이미지가 페이지에 전혀 표시되지 않는다는 것을 의미합니다. 갤러리는 텍스트 링크를 통해 실행되고 사용자는 일단 열면 이미지를 스캔 할 수 있습니다. 숨겨진 이미지가 다운로드 되었습니까?

는이를 위해이 같은 일을하고있다 :

CSS에서 다음
<div class="all_images"> 
    <a href="images/1.png" class="gallery" rel="g1"></a> 
    <a href="images/2.png" class="gallery" rel="g1"></a> 
    <a href="images/3.png" class="gallery" rel="g1"></a> 
</div> 

나는 수행 숨겨져 있기 때문에 이미지가 다음과 같이 다운로드 만약 내가 궁금하네요

이제
.all_images { 
    display: none; 
} 

또는 브라우저마다 다를 수 있습니까?

일부 이미지가 커질 수 있으므로 선호하지 않을 것입니다. 이미지를 보지 않으려면 이미지를 많이 다운로드하지 않아도됩니다.

+1

웹 브라우저의 개발 도구에는 어떤 HTTP 요청이 있었는지 알려주는 "넷"탭이 있습니다. 해당 "넷"탭을 열고 페이지를로드하십시오. 이미지 요청 여부를 확인할 수 있습니다. –

+0

@ ŠimeVidas 좋은 지적 - 고마워! – Brett

답변

5

예에서 <img/> 요소를 표시하지 않습니다. 클릭하면 이미지에 링크 할 하이퍼 링크 만 있습니다. 다운로드가 없습니다. 그들은 <img/> 태그 인 경우에 당신은 이미지의 불필요한 다운로드를 제거하여 페이지를 최적화하기 위해 찾고 있다면 그들은 display:none

+0

Hahahaha 좋은 지적. 나는 약 한 달 전에 코드를 썼다. 나는 내가 어떻게 그것을했는지 잊어 버렸고, 내가 그것에 대해 다시 돌아 왔을 때 많은주의를 기울이지 않았다. – Brett

0

로 설정 한 경우에도

는, 그들은 다운로드 할 것입니다. 당신은 하나의 커다란 이미지에 모든 이미지들을 결합하고이 이미지를 배경 이미지로로드 할 수 있습니다. 그런 다음 CSS 배경 위치를 활용할 수 있습니다. 속성을 사용하여 각 항목 (div, a, li et-al) 아래에서 이미지 조각을 사용합니다. 이 방법을 사용하면 모든 이미지를로드하는 하나의 HTTP 요청 만 수행하므로 좋은 페이지 최적화 기술이며 불필요한 http 요청을 피할 수 있습니다.

관련 문제