[isotop.js] ajax 호출 후 isotop 적용

- $(window).load(function(){

isoDom = $('#masonry').isotope({

itemSelector: '.masonry-item'

,masonry: {

columnWidth:0

});

위의 window가 load될 때 실행되는 과정이

chrome에서는 ajax 호출 후 이미지 로딩 된 후에 실행되는지 잘 적용되나

ie에서는 이미지 로딩 전 호출되는지 제대로 적용이 안됨

*해결

ajax 호출 후 isotope를 imagesLoaded를 통해 적용해서 해결함.

*필요한 js 라이브러리

- isotope.js

- imagesLoaded.js 

IE에서는 ajax 호출 후 이미지를 로딩한 후 isotope가 잘 적용됨.

크롬에서는 ajax 호출 후 이미지를 로딩 하기 전에 isotope가 적용되서 화면이 깨짐.

그래서 imagesLoaded 라이브러리를 사용해 이미지가 로딩된 후 적용함.

*Ajax 호출 성공 후 callBack 함수에 다음과 같이 isotope를 destroy한 후 다시 isotope를 적용한다.

$('#masonry').imagesLoaded(function(){

if(isoDom != null){

isoDom.isotope('destroy');

}

isoDom = $('#masonry').isotope({

itemSelector: '.masonry-item'

        ,masonry: {

          columnWidth:0

        }

    });

});