안녕하십니까! 선배님들~
스크립트 구성 해보다가 문의 드립니다.
<div id=rac-scroll-pop class="popup">
<div class="popup-banner">
<span class="popup-close">×</span>
<!--@import(/smart-banner/shop1/smart-banner-admin-PC00037.html)-->
</div>
</div>
위와 같이 스크롤 시 특정 부분에서 나타나는 팝업 요소가 있습니다.
위 소스중에서
<!--@import(/smart-banner/shop1/smart-banner-admin-PC00037.html)--> 이 임포트 문서는 앱에서 배너를 등록하면 자동으로 반영되는 구조인데요. 대부분 이미지 배너가 등록됩니다.
보통 이벤트 배너를 등록하는데요.
이벤트가 없을 시 이미지 파일이 없으면 div 자제가 안뜨게 하고 싶은데요.
구글링 해서 아래 같이 조합해봤는데 안되네요.
<script>
if (document.getElementById("rac-scroll-pop") !== null) {
$(function() {
$("#rac-scroll-pop").css({
"display":"block"
});
};
} else {
$(function() {
$("#rac-scroll-pop").css({
"display":"none"
});
};
}
</script>
제 생각에는 id 안에 img 파일이 있는지 확인해서 있다면 div를 보이고, 없다면 숨기면 될 것 같은데요.
선배님들의 조언 부탁드립니다.
답변 3개 / 댓글 4개
<script>
if ($("#rac-scroll-pop img").length == 0)
$("#rac-scroll-pop").hide();
</script>답변에 대한 댓글 2개
* https://chat.openai.com
* https://gemini.google.com
* https://clova-x.naver.com
스크립트 단에서 해도 이미지가 없을경우 404 에러가 지저분하게 남을것 같습니다.
저라면 html 임포트단 내부에서 처리할것 같네요.
임포트 전 부모 단에서는 fixed 할 위치만 잡고 너비나 높이는 auto 로 두고
디자인이나 크기 등등은 임포트 단에서 처리하도록요.
아니면 페이지 로드 후 특정 이미지가 없다면 hidden 처리하는 스크립트가 있는데
로드되기 전에 디자인이 보여질수도 있습니다.
그냥 임포트 html 문서에서 처리하시는게 좋을것 같습니다.
해당 img tag 안에 onerror 를 사용해서
<img src="ex.jpg" onerror="document.getElementById('rac-scroll-pop').style.display='none'">
처럼 하시면 되지 않을까요?
답변을 작성하려면 로그인이 필요합니다.
너무 정확하게 적용됩니다.
정말 감사합니다.
행복한 날들 되십시오.
꾸벅~