【总结】【图片预览】手机预览图片插件iSlider使用总结

开发资源包在这里：

http://download.csdn.net/detail/snow_finland/8763729

其中有官网原始版本和楼主优化过的版本可选择（楼主优化的部分都用注释标出了）

官网地址：

http://be-fe.github.io/iSlider/

需要用到islider时，可以包含islider.js的文件，然后js中做如下调用：

var islider_tpl = '<div class="iSlider" id="J_islider">'+'<div class="preview_toolbar preview_toolbar_top">'+'<a id="J_close_preview" class="icons1 i_close"></a>'+'<div class="user_info_box">'+'<p class="creator"></p>'+'<p class="time"></p>'+'</div>'+'</div>'+'<div id="iSlider-wrapper" class="preview_wrap">'+'</div>'+'<p id="J_islider_loading_more" class="loading_more hide">正在加载更多...</p>'+'</div>';$("#J_file_list .item").die().live('click',function(){var show_current = $(this).index();var window_scroll_top = $(window).scrollTop();$('body').append(islider_tpl);$('#J_file_list').hide();islider = new iSlider({type: 'pic',data: islider_array, // islider_array为arr形式，每一个arr中的obj包含需要用到的信息，比如fileid、content、creatorid、time等等dom: document.getElementById("iSlider-wrapper"),isLooping: true,animateType: 'default',useZoom: true,initIndex: show_current});var prevent_body_move = function(evt){evt.preventDefault();}var prevent_window = document.body;prevent_window.addEventListener('touchmove', prevent_body_move);$('#J_close_preview').die().live('touchstart',function(){islider.destroy();$('#J_islider').remove();prevent_window.removeEventListener('touchmove', prevent_body_move);$('#J_file_list').show();$(window).scrollTop(window_scroll_top);return false;});});

由于代码都比较简单，并且资源包中的注释都非常详细，

这里就提一下开发中碰到过的几个重要的部分：

1、为了良好的用户体验，在出islider的图片预览浮层时，需要将所有body上别的元素隐藏，并且滚轴移动到左上角的地方，屏蔽body的默认move事件，确保屏幕中只有左右滑动，长按保存图片和关闭浮层这几个操作

2、官网中屏幕旋转的事件是监听在元素上的，但是android手机只有window上才能监听到这个事件，ios可以监听在元素上，所以这个部分需要改为监听在window上，以便兼容

3、允许瀑布流方式的加载更多的图片（在预览时），当图片是倒数三张的时候加载更多批次；当正在加载后一批并且这时已经是当前批次的最后一张图时，不允许左右滑动切换图片，并且给出正在加载的提示

4、修复官网代码中，只有一张图片时的加载和左右滑动的事件错误

5、重设了最大和最小的缩放尺寸（官网版本只有最小缩放尺寸）

PS：这是楼主目前用下来最好用的图片预览插件，没有之一，可控性比较强，而且代码比较简短，比较清晰，容易根据个人需要进行改动和添加，并且没有屏蔽浏览器原生的长按保存图片的功能