openseadragon 属性及在移动端卡顿的解决方案

属性：

   id:装载到的容器
    element:同上（若两者同时存在，element具有最高优先级）
    titleSources:图片源//详细描述请先自行参考官网，这个属性配置项比较多
    prefixUrl:OpenSeadragon自带图表样式//工具所需用到图表样式路径
    navImages://自定义图标，通过上诉属性映射静态资源图标
    debugMode:  true或false   开启debug模式
    debugGridColor: ['#000000']//debug颜色
    blendTime:0  初始化白屏时间
    alwaysBlend:true,//当图片缩小时，是否显示白色遮盖图片
    autoHideControls:true//当鼠标不在图片上时，是否自动隐藏导航视图和缩略图
    immediateRender:false//初始化渲染，是否自动选择最佳分辨率图片显示，移动端最好开启  
    defaultZoomLevel:0//初始化放大倍率，默认为0，自动适应元素
    opacity：隐藏和显示，1显示，0全部隐藏
    preload:false,Default switch for loading hidden images (true loads, false blocks)//不明白
    compositeOperation:'source-over', 'source-atop', 'source-in', 'source-out', 'destination-over', 'destination-atop','destination-in', 'destination-out', 'lighter', 'copy' or 'xor' //任取其一，不明白有啥作用
    placeholderFillStyle:'#FF8800'//初始化时，图片未载入现实的样式，默认是白色，此属性可选的方式有	String | CanvasGradient | CanvasPattern | function
    degrees:90,//图片旋转角度
    flipped:true//镜像翻转
    minZoomLevel:null,//最小放大倍数
    maxZoomLevel:null,//最大放大倍数
    homeFillsViewer:false,//使主页按钮填满查看器//没看到效果
    panHorizontal：true  //是否允许水平移动
    panVertical：true  //是否允许垂直移动
    constrainDuringPan：false//官方未说明
    wrapHorizontal:true,//水平复制图片，适用于圆形图片
    wrapVertical:true,//垂直复制图片，使用于圆形图片
    minZoomImageRatio:0.9/0-1/最小缩放倍率，窗口的百分比
    maxZoomPixelRatio：1.1//最大放大倍率，窗口的百分比
    smoothTileEdgesMinZoom:1.1,//放大到最大倍率后，容器的表现形式，是否为平滑过渡，还是由原图逐渐放大到容器的宽度，这个属性会影响性能，建议使用Infinity将此属性关闭，且IOS下，设置此属性无效
    iOSDevice:false //设置是否运行在ios设备上，以避免一些表现形式得不同，如果确认将在ios下运行，设置为true，不确认得时候忽略此属性
    autoResize:true,//设置是否自动伸缩，若容器得宽度被放到或者缩小，则图片会自动重新使用
    preserveImageSizeOnResize:fasle// 设置图像是否保留原图比例大小，以确保当容器被放大或者缩小时，图片被拉伸，当上一属性为true时起作用
    minScrollDeltaTime:50,//倍率切换时间，越大则倍率切换时越慢
    pixelsPerWheelLine:40 //移动端滚动像素值，每次滚动移动得像素值
    pixelsPerArrowPress：40 // 每按下浏览器进度条的向上或向下按钮，移动的像素值
    visibilityRatio:0.5,//0-1之间，0代表图片可完全拖出显示框，1代表图片一点也不可以拖出
    imageLoaderLimit：0 //设置同时请求的图片数量，默认0允许浏览器根据浏览器策略允许并生成最大数量的图像请求。
    clickTimeThreshold:300  //鼠标单击一下 多长时间内即被视为点击事件，比如长时间按住鼠标左键不放，如果超出这个时间，则不会被视为点击事件clickDistThreshold: 5 //鼠标左键落下至弹起这一段时间内，鼠标移动多少距离，将被视为一次点击事件，一般和上边的时间同时设置才会看到效果
    dblClickTimeThreshold：300  //双击事件，两次单击的时间间隔为多少毫秒内，及会被视为双击事件
    dblClickDistThreshold：20  //两次双击的时间内，鼠标移动多少距离内，即被视为双击事件
    springStiffness:6.5,  //缩放过渡效果，，值越小，则动画越趋于柔和
    animationTime：5 //放大或缩小动画过渡的时间，这个值越小，过渡快
 
    gestureSettingsMouse:{  //鼠标事件设置
        scrollToZoom：true  //是否禁用滚轮滚动事件
        clickToZoom:true //是否禁用鼠标单击事件
        dblClickToZoom:true //是否禁用双击事件,如果将此设置为true   那么应该禁用单击事件
        pinchToZoom:true  //禁用移动端手势缩放
        flickEnabled:true // 拖动手势结束时禁用动态平移效果(轻弹)
        flickMinSpeed: 5  拖动结束动态平移效果的时间
        flickMomentum:5  拖动结束动态平移效果的距离
        zoomToRefPoint:false  //放大缩小中心点，设为false则以画布中心点缩放，true则以鼠标为中心点缩放
        pinchRotate:true   //可以使用手势进行旋转
    }
    gestureSettingsTouch：{} //触摸屏事件   同上
    gestureSettingsPen：{}  //笔触事件  同上
    gestureSettingsUnknown：{}  //未知设备  同上
    zoomPerClick:8,  //点击一下  放大倍率 设置为1   则代禁用单击事件  同gestureSettingsMouse.clickToZoom
    zoomPerScroll:1  //滚轮放大倍率，设置为1  则代表禁用滚轮事件   同gestureSettingsMouse.scrollToZoom
    zoomPerSecond:1,   //结束单个缩放动画的秒数
    showNavigator:true //是否显示导航缩略图
    navigatorId：   //导航所在容器ID  如果指定则会忽略导航上所有的属性  使用自定义的css
    navigatorPosition：'TOP_LEFT'，'TOP_RIGHT'，'BOTTOM_LEFT'，'BOTTOM_RIGHT'或'ABSOLUTE'   ///导航所在位置 若为ABSOLUTE，可根据需求指定位置navigatorTop，navigatorLeft，  且会忽略下边两个属性若为其他，则会根据下边的属性或者导航的宽高确定导航的大小
    navigatorSizeRatio：0.2   导航的大小与整体视图的比例 ，  如果设置了导航的宽高  则忽略此属性
    navigatorMaintainSizeRatio: ture 当容器大小改变时，是否自动缩放导航图的大小，此属性依赖上一属性
    navigatorHeight：   //指定后将会忽略上边两个属性
    navigatorWidth：  同上
    navigatorAutoResize:true  根据视图自动调整导航大小  若已确定导航大小，请设置为false避免每次窗口缩放的查询 可提高性能
    navigatorAutoFade:false  // 如果用户停止与视口交互，则淡化导航器迷你地图。设置为false将使导航器小地图始终可见。
    navigatorRotate:true   //图像旋转时   导航地图同时旋转
    navigatorBackground：'#ffffff'  //导航背景色
    navigatorOpacity:0.8   //导航背景透明度
    navigatorBorderColor：''  // 导航边框颜色
    navigatorDisplayRegionColor： ''   //导航中，当前查看区域的边框颜色
    controlsFadeDelay:2000   //停止交互多少秒后，隐藏导航栏
    controlsFadeLength:1500   //导航窗口淡化动画时间
    maxImageCacheCount：200   //最大缓存图片数量
    timeout:30000   //图片最大显示时间数，加载超出这个时间后，及被认定为加载失败
    useCanvas:true  // 使用Canvas绘制图像，设置false  即使浏览器支持Canvas  也不会使用Canvas
    minPixelRatio:0.5  //不确定，这个值越高，则会在带宽数较低的设备上显示时，渲染出的图片质量越低，用以减少带宽消耗
    mouseNavEnabled：true  是否允许用户通过鼠标或触摸 与图像交互
    showNavigationControl：true  //基础控件的展示与隐藏
    showZoomControl:true   //显示放大和缩小按钮
    showHomeControl：true  //显示回到主位置按钮
    showFullPageControl：true   //显示全屏按钮
    showRotationControl:true //显示左旋转和右旋转按钮  只有在支持的浏览器上才可以正常显示
    showFlipControl：true   //显示镜像翻转按钮
    navigationControlAnchor: 'NONE','TOP_LEFT','TOP_RIGHT','BOTTOM_LEFT','BOTTOM_RIGHT','ABSOLUTE'  //控件位置
    showSequenceControl:true //显示向前向后按钮
    sequenceMode:true  //设置为true 代表加载的是一张图片，而非一个图片合集
    navPrevNextWrap：true  //设置为true，上一个按钮和下一个按钮会形成循环
    initialPage：0 //上一属性为true时，设置首次加载加载第几个在主屏
    preserveViewport：true  //猜测：如果是一个集合时，每张图像之间切换时，视窗将会被保留
    preserveOverlays:true   //切换图片后，仍然保留图层
    showReferenceStrip:false   //显示图像缩略图滚动条
    collectionMode:true, //
    collectionRows:10,
    collectionColumns:10,
    collectionLayout:,
    collectionTileSize:,
    collectionTileMargin:,
 
    zoomInButton：''  //自定义放大按钮ID
    zoomOutButton：'',//自定义缩小按钮ID
    homeButton:'',//自定义主位置按钮ID
    fullPageButton:'',//自定义全屏按钮ID
    rotateLeftButton:'',//自定义左旋转按钮ID
    rotateRightButton:'',//自定义右旋转按钮ID
    previousButton:'',//自定义上一个按钮ID
    nextButton:''//自定义下一个按钮ID
    crossOriginPolicy:true,  //设置为true 不允许使用跨域请求cors
 
    //请使用titleSource，不要使用下边的
    ajaxWithCredentials：true   是否为AJAX请求设置withCredentials XHR标志
    loadTilesWithAjax：true   //是否适用ajax请求加载切片
    ajaxHeaders：  ’‘ajax请求头

在移动端下配置才不会卡

        id: 'openseadragon1',
		prefixUrl: "./images/",
		visibilityRatio: 1,
		minZoomLevel: 0.5,
		maxZoomLevel: 8,
		minScrollDeltaTime:50,
		pixelsPerWheelLine:40,
		immediateRender:false,
		iOSDevice:true,
		springStiffness:4,
		animationTime:5,
		useCanvas:false,
		tileSources: {
			Image: array
		},
		minPixelRatio:1,
		zoomInButton: "zoom-in", //放大
		zoomOutButton: "zoom-out", //缩小
		homeButton: "home", //恢复默认
		fullPageButton: "full-page", //全屏
		nextButton: "next", //下一张图片
		previousButton: "previous", //前一张图片