2013-09-06 2 views
-1

프로그래밍에 익숙하지 않지만 아래에 설명 된 방법을 찾으려합니다. 내가 이상적으로 만 특정 클래스/ID 내에 내장 처음 3 IMG을로드하고 나머지 을 요청하기 위해 클릭 할 수있는 트리거를 것 PHP 기능을 찾기 위해 노력하고있어PHP가 항목로드를 막고 트리거를 사용하여로드합니다.

<body> 

<div class="gallery"> 

<img src="photo_1.jpg"> 
<img src="photo_2.jpg"> 
<img src="photo_3.jpg"> 

<!-- trigger for user to load items that weren't downloaded on page load --> 
<img src="photo_4.jpg"> 
<img src="photo_5.jpg"> 
<img src="photo_6.jpg"> 

</div> 

</body> 

img 서버에서 퍼가기. 실제로, 로딩을 방지 여부와 같이

이 전형적인 메시지 보드 소프트웨어 (예 : vBulletin에)는 "스포일러 태그"으로 일을 처리하는 방법 경우 나도 몰라 .. 아니면 그냥 숨 깁니다 보기에서 콘텐츠. 그런 식으로 로딩을 실제로 막는다면 내가 알고 싶은 것입니다.

+2

시도해 보셨습니까? 그렇다면, 무엇? (또한 PHP로 할 수있는 것이 아닙니다. 자바 스크립트가 필요합니다.) – user1618143

+0

또한 [lazyload] (http://css-tricks.com/snippets)로 알려진 뷰포트 chanheing시 이미지를로드하는 방법이 있습니다./javascript/lazy-loading-images /). –

+0

그래,이 모든 PHP는 PHP 다! @로 팅엄 (Rottingham)은 쓰기 트랙에있어 인라인에서 꺼내기 만하면됩니다. – Travis

답변

0

먼저 PHP와는 아무런 관련이 없습니다.

페이지가 이미지를로드하지 못하게하는 유일한 방법은 페이지에 태그를 포함하지 않는 것입니다. 숨겨진 컨테이너 내부

놓고 마지막 세 사진을하고 싶어 할 때를 표시하는 자바 스크립트 클릭 이벤트를 사용할 수 있지만 페이지가로드 될 때 여전히 이미지를로드 :

이에게 몇 가지 방법을 수행 할 수 있습니다.

또는 AJAX 호출을 사용하여 필요할 때만 항목을 검색 할 수 있습니다. 그들이 정말로 큰 이미지가 아니라면 나는 첫 번째 옵션이 최고라고 생각할 것입니다.

<div class="gallery"> 
    <img src='photo1.jpg'/> 
    <img src='photo2.jpg'/> 
    <img src='photo3.jpg'/> 
    <a href="#" onClick='document.getElementById("hidden-gallery").display="visible"'>show more</a> 
    <div id="hidden-gallery" class="hidden-gallery" style="display:none"> 
     <img src='photo4.jpg'/> 
     <img src='photo5.jpg'/> 
     <img src='photo6.jpg'/> 
    </div> 
</div> 

나는 내장 CSS 스타일과 자바 스크립트가 내가했던 방식이 선호되는 방법 아님을 인식하지만 그냥 예제를 위해서 존재한다.

+0

JavaScript를 사용하여 다른 제안을 한 적이 있지만 이미 대역폭과 페이지 길이가 모두로드되지 않도록해야한다고 생각합니다. –

+0

그러면 AJAX와 서버 측 스크립트 호출을 연구하거나 Javascript를 사용하여 노드를 DOM에 동적으로 추가해야합니다. – Rottingham

+0

실제로 AJAX를 사용할 필요는 없습니다. jquery 또는 표준 javascript 페이지 조작으로'img' 태그를 추가하면 브라우저가 나가서 필요한 이미지를 다운로드 할 수 있습니다. – user1618143