"틀:이미지스와이퍼"의 두 판 사이의 차이

광주문화예술인문스토리플랫폼
이동: 둘러보기, 검색
 
(같은 사용자의 중간 판 8개는 보이지 않습니다)
70번째 줄: 70번째 줄:
 
       });
 
       });
  
 +
      // 이미지 로딩 타임아웃 및 에러 처리
 +
      var swiperContainer = document.querySelector('.image-swiper-container');
 +
      document.querySelectorAll('.image-swiper-container .swiper-image').forEach(function(img) {
 +
        var timeout;
 +
        var removeSlide = function() {
 +
          clearTimeout(timeout);
 +
 +
          // 슬라이드 제거
 +
          var slideToRemove = img.closest('.swiper-slide');
 +
          if (slideToRemove) {
 +
            slideToRemove.remove();
 +
          }
 +
 +
          swiper.update();
 +
 +
          // 슬라이드 제거 후 남은 슬라이드 확인
 +
          var remainingSlides = document.querySelectorAll('.image-swiper-container .swiper-slide');
 +
          console.log('남은 슬라이드 개수:', remainingSlides.length);
 +
 +
          // 슬라이드가 하나도 없으면 스와이퍼 컨테이너 및 상위 h2 제거
 +
          if (remainingSlides.length === 0 ) {
 +
            if(swiperContainer){
 +
              console.log('슬라이드가 없어서 스와이퍼 컨테이너 제거');
 +
 +
              // id가 "이미지"인 h2 찾기
 +
              var imageHeading = document.querySelector('#이미지');
 +
              if (imageHeading) {
 +
                // h2 요소의 부모 찾기 (일반적으로 h2.mw-headline의 부모)
 +
                var headingParent = imageHeading.closest('h2');
 +
                if (headingParent) {
 +
                  console.log('이미지 섹션 제목도 제거');
 +
                  headingParent.remove();
 +
                }
 +
              }
 +
 +
              swiperContainer.remove();
 +
            }
 +
          }
 +
        };
 +
 +
        // 1.5초 타임아웃 설정
 +
        timeout = setTimeout(function() {
 +
          if (!img.complete) {
 +
            removeSlide();
 +
          } else if (img.naturalHeight === 0) {
 +
            removeSlide();
 +
          }
 +
        }, 1500);
 +
 +
        // 이미지 로딩 성공 시 타임아웃 취소
 +
        img.addEventListener('load', function() {
 +
          clearTimeout(timeout);
 +
        });
 +
 +
        // 이미지 로딩 실패 시 슬라이드 제거
 +
        img.addEventListener('error', function() {
 +
          removeSlide();
 +
        });
 +
      });
 
     });
 
     });
−
// 이미지 로딩 실패 시 슬라이드 제거 후 Swiper 업데이트
 
−
document.querySelectorAll('.image-swiper-container .swiper-image').forEach(function(img) {
 
−
img.addEventListener('error', function() {
 
−
this.closest('.swiper-slide').remove();
 
−
swiper.update();
 
−
});
 
−
});
 
 
   </script>
 
   </script>
 
}}
 
}}
 
</includeonly>
 
</includeonly>

2025년 12월 29일 (월) 11:22 기준 최신판

원본 주소 "https://gwangju-storyplatform.com/wiki/index.php?title=틀:이미지스와이퍼&oldid=59908"