IE9下Swiper控件不能准确定位到指定页面问题的解决

应用场景：

采用轮播控件对表格中的图片文件进行展示，当点击表格中的图片文件时，使用轮播控件（Swiper）显示指定的图片，同时，可以左右翻页，前后浏览所有的图片。

实现思路：

（1）使用JS创建Swiper的躯干（Swiper相当于灵魂，灵魂必须依附肉体才能起作用）。

    __createPreviewHtml: function(){    if($('#__sc1').length>0) return;    var html =     '<div id="__sc1" class="swiper-container" style="z-index:9999;">'     + '<a href="javascript:void(0);" id="__sc_closeBtn" class="closeBtn" title="close"> X </a>'    + '<div class="swiper-wrapper">   '    + '</div> '    + '<div class="swiper-pagination"></div>'    + '<div class="swiper-button-prev"></div>'    + '<div class="swiper-button-next"></div>'            + '</div>';    $(document.body).append(html);    $('#__sc_closeBtn').on('click',this.__hidePreviewBox);    }

（2）遍历表格中的图片文件，并塞入Swiper的躯干，获取点击图片文件的索引号（index），URL（通过文件ID唯一标识）。

        var index = 0;        var i = 0;        me._grid.findRow(function(row){                     var fileId2 = row.fileId;                var fileName2 = row.fileName.toLowerCase();                                if(fileName2 && imgReg.test(fileName2)==true){                              if(fileId == fileId2){                index = i;                }                                var picParam = me.fileService + "/preview?fileId=" + encodeURIComponent(fileId2);                var imgHtml = '<img src="' + picParam + '"/>';                 var $slide = $('<div class="swiper-slide">' + imgHtml + '</div>');                 $('.swiper-wrapper').append($slide);                 i++;                }        });                 if(typeof(mySwiper) != 'undefined'){        mySwiper.removeAllSlides();        }  

（3）创建Swiper控件，同时使用Swiper的slideTo(index)方法定位到指定的位置，显示图片。

        $(document).ready(function () {                 mySwiper = new Swiper ('#__sc1', {            paginationClickable: true,            initialSlide: 0,            observer: true,            observeParents: true,            direction: 'horizontal',            slidesPerView: 1,            loop: false,                        // 如果需要分页器            pagination: '.swiper-pagination',                        // 如果需要前进后退按钮            nextButton: '.swiper-button-next',            prevButton: '.swiper-button-prev',                        // 如果需要滚动条            scrollbar: null,            });   
           $('#__sc1').show();                                    mySwiper.slideTo(index); 
 //$('.swiper-pagination span').eq(index).trigger('click'); });
问题：
在IE10和Firefox下工作正常，在IE9下不能正常定位，总是定位到第1页（图）。
分析：
通过调查，发现，IE9在处理隐藏DOM元素时和IE10有较大的区别。现有代码是先初始化Swiper，然后再显示Swiper的躯干。
试着将Swiper的躯干（DOM元素）先显示，然后再实例化。测试结果表明能正常定位到指定页面。可见，在IE9下，对隐藏DOM元素进行操作可能会存在一些问题，导致Swiper未能正常初始化。
解决：
先显示Swiper的躯干（DOM元素） ，然后再实例化Swiper。即第3段代码，show()方法在 new Swiper()方法之前。
注：
要兼容IE7，8，一定要使用Swiper版本2.x，3.x会有N多的问题，3.x版本主要兼容高版本浏览器和移动应用。