(2) 이미지 로드 시점 잡기 ( img load )

(2) 이미지 로드 시점 잡기 ( img load ) 

1. 이미지 태그를 마크업한다.

    ( src는 비우고 data-src에 src값을 넣어놓는다, 로드 후 바꾸기 위함 )

<img data-src="<%=IMAGE_SITE_DOMAIN%>{{image}}" src="" alt="">

2. 온로드 이벤트를 건다.

3. attr로 src값을 data-src값에서 받아와서 넣는다.

4. 그럼 src값이 변경 된 후 이벤트가 발생 ( 데이터를 뿌려주는데 이미지 넓이값을 가져와야할때 쓰임, 첨부터 이미지 넓이를 잡아버리면 로드 전에 넓이가 0이어서 안잡힐 때가 있음 )

1. _listContainer.append( tag );

           _listItems = _list.find( "li" );

           _listItems.on( "click", listItemClick );

           var thumb;

           _listItems.each( function( i ){

               thumb = $( this ).find( ".thumb_guide" ).children( "img" );

               2) thumb.on( "load", thumbImgLoadComplete );

               3) thumb.attr( "src", thumb.attr( "data-src" ));

           });

           showListItem( $index );

       }

       function thumbImgLoadComplete( $e )

       {

           var el = $( this );

           var parent = el.parent();

           el.css( "left", ( parent.width() - el.width() ) / 2 );

       }

팝업에 이미지를 불러와서 넓이값 및 위치를 조정해야 할 경우

( 가로넓이가 큰이미지가오던 적던 가로/세로 가운데 정렬 해야할 경우 )

팝업을 열기전에 이미지 로드시점에 넓이값을 받아서 조정해줘야함

$(document).on("click",".img_box",function(){

       var src = $(this).data("src");

       if(src != undefined){

           $( "#pop_img" ).on( "load", function( $e ){

               var item = $( this ).css({ width : "auto", height: "auto" });

               var parent = $( this ).parent();

               var iW = item.width();

               var iH = item.height();

               var pW = parent.width();

               var pH = parent.height();

               if( iW > iH && iW > pW )

               {

                   item.css({ width : pW, height : "auto" });

               }else if( iW < iH && iH > pH ){

                   item.css({ width : "auto", height : pH });

               }

               iW = item.width();

               iH = item.height();

               item.css({ left : ( pW - iW ) / 2, top : ( pH - iH ) / 2  });

           });

           $("#pop_img").attr("src",src);      // 개발쪽에서 이미지 src를 삽입. 이미지가 로드됨

           App.popup.OpenLayerPopup('pop_photo');

       }

   });