Soufang Home M Station을 개발할 때 Soufang Home Decoration 렌더링 앨범 디스플레이 효과는 사진을 표시하기 위해 Photoswipe 플러그인을 사용해야합니다.
특징:
1. 집에서 제공 한 인터페이스는 한 번에 하나의 사진 만 얻을 수 있습니다.
2. 장식 렌더링의 수는 무제한입니다.
3. Photoswipe의 사용으로 판단하면 Photoswipe가 초기화되기 전에 모든 사진이 나열되어야합니다.
instance = photoswipe.attach (wind
태그 A는 Photoswipe 초기화 이전이며 갤러리에 동적으로 추가하면 유효하지 않습니다.
현재 솔루션은 인터페이스를 먼저 10 번 호출하고 10 장의 사진을 나열하는 것입니다. 이 10 장의 사진을 표시 한 후 URL을 통해 다음 페이지로 이동하여 다음 그룹에 10 장의 사진을 표시하십시오.
이 솔루션의 장점은 다음과 같습니다
1. 달성하기 쉬운.
단점 도 매우 분명합니다.
1. 다음 페이지로 점프 할 때마다 사용자는 오랫동안 기다립니다. (인터페이스가 10 배 + 현재 이미지가 클라이언트에 다운로드되는 시간 + 다른 시간)
2. 사진이 왼쪽과 오른쪽으로 미끄러지는 동안 내년에 페이지로 갑자기 점프하면 사용자 경험에도 영향을 미칩니다.
페이지와 점프를 얻지 못하도록 PhotosWipe를 최적화하는 방법.
Photoswipe를 사용한 사람은 누구나 Photoswipe.eventtypes.ondisplayimage를 알아야합니다. 이 이벤트는 사진이 표시 될 때마다 트리거됩니다.
instance.addeventhandler (photoswipe.eventtypes.ondisplayimage, function (e) {// 일부 코드 함수를 여기에서 구현합니다.});연구를 통해 표시된 이미지 객체 모음은 e.target.cache.images를 통해 액세스 할 수 있습니다. 이러한 사고 방식은 더 명확합니다. "먼저 자리 표시자를 충분히 정의한 다음 이미지 슬라이딩 디스플레이 중에 Ajax를 통해 그림 주소를 지속적으로 얻은 다음 e.target.cache.images 이미지 수집에 해당 사진을 할당하십시오."
다음 코드는이 아이디어 방법의 구현입니다 (이 아이디어를 설명하는 편의를 위해 추가 세부 사항은 생략되었습니다)
<ul id = "갤러리"스타일 = "디스플레이 : 없음;"> <!-다음 10은 인터페이스를 통해 처음부터 얻은 그림입니다-> <li> <a href = "viewImage/zxb/2014_06/30/82/86/pic/000711232400/800x800.jpg"> </a> </li> href = "ViewImage/ZXB/2014_04/18/31/94/pic/000664552500/800x800.jpg"> </a> </a> </li> <li> <a href = "ViewImage/zxb/2014_06/14/69/65/pic/002962064200/800x800.jpg"> </a> </a> <li> <a href = "ViewImage/zxb/2014_06/05/75/33/pic/005426525600/800x800.png"> </a> </li> <li> <a href = "ViewImage/ZXB/2014_02/12/13/15/pic/007331476000/800x800.jpg"> </a> </li> <li> <a href = "ViewImage/zxb/2014_05/06/44/99/pic/004717983300/800x800.jpg"> </a> </li> <!-다음은 자리 표시 자입니다 href = "common_m/m_public/images/loading.gif"> </a> </a> </li> <li> <a href = "common_m/m_public/images/loading.gif"> </a> </li> <li> <a href = "common_m/m_public/image/loading.gif"> </li> </li> </li> href = "common_m/m_public/images/loading.gif"> </a> </li> <!-여러 자리 표시자를 필요에 따라 태그를 추가 할 수 있습니다-> </ul>
Photoswipe.eventtypes.ondisplayimage 이벤트를 들으면 이미지가 다운로드되기 전에 자리 표시 자 이미지의 주소를 수정하려면 e.target.cache.images를 수정하십시오.
var aimgarrindex = 0; var picsetindex = 10; instance.addeventhandler (photoswipe.eventtypes.ondisplayimage, function (e) {var needetimg = e.target.cache.images [picsetindex ++]; if (needetimg) { $ .getJson ( "./ index.php? c = jiaju & a = ajaxnextpicinfo & picid = {picid 매개 변수} $ (photoswipe.data ( 'comment', '')의 이미지 컬렉션에서 $ (needetimg.metadata.item); // 다른 추가 내용을 이런 식으로 설정}});index.php? 다른 Picids에 따르면, 사진의 관련 정보는 매번 반환됩니다.
코드 사본은 다음과 같습니다.
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.