bxSlider ie issue

# bxSlider 라이브러리 사용중 버그발견 (bxslider ie 문제 인듯)

[원인]

http://bxslider.com/examples/slideshow-adaptive-height

위와 비슷한 형태의 슬라이더 배너를 만들고 

IE에서 테스트를하나 처음접속시 배너영역이 나오지 않는다.

다시 새로고침하면 나오지만 캐시 삭제후 다시 접속을 하면 

배너 이미지가 나오지 않고 로딩이미지만 나오는 버그 발견

구글 검색후 다양한 해결 방법이 있었지만 해결되지 않았다.

[해결]

jquery.bxslider.js 파일에 코드 추가

setup function 부분

/**

* Performs all DOM and CSS modifications

*/

var setup = function(){

// wrap el in a wrapper

el.wrap('<div class="' + slider.settings.wrapperClass + '"><div class="bx-viewport"></div></div>');

// store a namspace reference to .bx-viewport

slider.viewport = el.parent();

// add a loading div to display while images are loading

slider.loader = $('<div class="bx-loading" />');

slider.viewport.prepend(slider.loader);

// set el to a massive width, to hold any needed slides

// also strip any margin and padding from el

el.css({

width: slider.settings.mode == 'horizontal' ? (slider.children.length * 100 + 215) + '%' : 'auto',

position: 'relative'

});

// if using CSS, add the easing property

if(slider.usingCSS && slider.settings.easing){

el.css('-' + slider.cssPrefix + '-transition-timing-function', slider.settings.easing);

// if not using CSS and no easing value was supplied, use the default JS animation easing (swing)

}else if(!slider.settings.easing){

slider.settings.easing = 'swing';

}

var slidesShowing = getNumberSlidesShowing();

// make modifications to the viewport (.bx-viewport)

slider.viewport.css({

width: '100%',

overflow: 'hidden',

position: 'relative'

});

slider.viewport.parent().css({

maxWidth: getViewportMaxWidth()

});

// make modification to the wrapper (.bx-wrapper)

if(!slider.settings.pager) {

slider.viewport.parent().css({

margin: '0 auto 0px'

});

}

// apply css to all slider children

slider.children.css({

'float': slider.settings.mode == 'horizontal' ? 'left' : 'none',

listStyle: 'none',

position: 'relative'

});

// apply the calculated width after the float is applied to prevent scrollbar interference

slider.children.css('width', getSlideWidth());

// if slideMargin is supplied, add the css

if(slider.settings.mode == 'horizontal' && slider.settings.slideMargin > 0) slider.children.css('marginRight', slider.settings.slideMargin);

if(slider.settings.mode == 'vertical' && slider.settings.slideMargin > 0) slider.children.css('marginBottom', slider.settings.slideMargin);

// if "fade" mode, add positioning and z-index CSS

if(slider.settings.mode == 'fade'){

slider.children.css({

position: 'absolute',

zIndex: 0,

display: 'none'

});

// prepare the z-index on the showing element

slider.children.eq(slider.settings.startSlide).css({zIndex: slider.settings.slideZIndex, display: 'block'});

}

// create an element to contain all slider controls (pager, start / stop, etc)

slider.controls.el = $('<div class="bx-controls" />');

// if captions are requested, add them

if(slider.settings.captions) appendCaptions();

// check if startSlide is last slide

slider.active.last = slider.settings.startSlide == getPagerQty() - 1;

// if video is true, set up the fitVids plugin

if(slider.settings.video) el.fitVids();

// set the default preload selector (visible)

var preloadSelector = slider.children.eq(slider.settings.startSlide);

if (slider.settings.preloadImages == "all") preloadSelector = slider.children;

// only check for control addition if not in "ticker" mode

if(!slider.settings.ticker){

// if pager is requested, add it

if(slider.settings.pager) appendPager();

// if controls are requested, add them

if(slider.settings.controls) appendControls();

// if auto is true, and auto controls are requested, add them

if(slider.settings.auto && slider.settings.autoControls) appendControlsAuto();

// if any control option is requested, add the controls wrapper

if(slider.settings.controls || slider.settings.autoControls || slider.settings.pager) slider.viewport.after(slider.controls.el);

// if ticker mode, do not allow a pager

}else{

slider.settings.pager = false;

}

// preload all images, then perform final DOM / CSS modifications that depend on images being loaded

loadElements(preloadSelector, start);

//아래 코드 추가 IE 경우 start() 함후 호출 

if (navigator.appName == "Microsoft Internet Explorer") {

start();

}

}

완벽한 해결방안인지 모르겠지만 우선 IE에서는 한번더 start()함수를  실행함으로써 해결되었음