kiwi mall.co.me

해당 페이지에서 확인해보니 스샷처럼 이미지가 문제생기는 화면이 보이지 않더라구요

네트워크 지연시켜 이미지로딩속도를 늦춰도 마찬가지구요

​

해당코드를 살펴보니 이미지를 감싸는 list 클래스 항목이 스크립트로 뿌려져서 생기는 문제인것 같습니다

​

footer.1.js 파일에

// 상품리스트 function listPrd(){ prdListHeight(".prd_listWrap.col3 li .list"); prdListHeight(".prd_listWrap.col4 li .list"); prdListHeight(".prd_listWrap.col5 li .list"); jQuery(".prd_listWrap > li").each(function(){ jQuery(this).mouseenter(function(){ if (jQuery('.fixed',this).hasClass("fixed") == true){ //jQuery(".fixed",this).children().animate({"position" :"absolute", "marginLeft" : "-=5%", "marginTop" : "-=5%","width" : "110%","height" : "110%"}, 300); jQuery(this).find(".prdImg").stop().animate({"position" :"absolute", "marginLeft" : "-=5%", "marginTop" : "-=5%","width" : "110%","height" : "110%"}, 300); } jQuery(".preview",this).show().css({left: "-34px"}).stop().animate({left: "0px"},200); //jQuery(this).parent().find(".discount").show().css({top: "-20px",opacity: "0"}).animate({top: "0px",opacity: "1"},200); jQuery(".hit",this).show().css({right: "-34px",opacity: "0"}).stop().animate({right: "3px",opacity: "1"},200); }) jQuery(this).mouseleave(function(){ jQuery(".prdImg",this).stop().animate({ "position" :"relative", "marginLeft" : "0", "marginTop" : "0","width" : "100%", "height" : "100%"}, 300); jQuery(".preview",this).css({left: "0px"}).stop().animate({left: "-34px"},200); //jQuery(this).find(".discount").css({top: "0px",opacity: "1"}).animate({top: "-20px", opacity: "0"},200); jQuery(this).find(".hit").css({right: "3px",opacity: "1"}).stop().animate({right: "-34px",opacity: "0"},200); }); }); function prdListHeight(h_sel){ var list_h=0; jQuery(h_sel).each(function(){ var h = parseInt(jQuery(this).css("height")); if(list_h<h){ list_h = h; } }); jQuery(h_sel).each(function(){ jQuery(this).css({height:list_h}); }); } };

prdListHeight함수에

상품리스트에 항목을 하나씩 체크해서 최종적으로 가장큰값에 높이를 list_h변수에 할당한후

전체항목을 list_h변수값으로 높이를 세팅해주고 있네요

​

위에코드는 사실 스크립트가 아닌 css로 충분히 구현이 가능합니다

심지어 마우스 호버이벤트는 width랑 height값을 크기를 늘리기 때문에 실제 화면에서 공간이 넓어지니 그걸막기위해서 list클래스에 높이를 세팅후 overflow: hidden으로 막아두신것 같은데 보통 호버 효과를 넣을땐 transform: scale(1.1); 스케일을 사용해서 넣으면 실제 화면에 늘어난 영역을 자치하지 않습니다

​

설명이 길어졌는데 정리하면 (정석대로 진행시)

높이지정 스크립트 구문제거시 → 호버시 스크립트구문에서 강제로 width,height값을 늘러줘서 레이아웃에 영향을 줌 → 그래서 listPrd함수를 지우고 다시 css로 세팅을 해줘야합니다

​

근데 복잡할수 있으니 간단하게 처리하는 방법은

결국 높이를 체크한후 강제로 높이를 고정시켜야 하기때문에 이미지를 로드후 해당함수를 불러오면 됩니다

window.onload = function(){ listPrd(); };

​