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

版权声明：本文为博主原创文章，未经博主允许不得转载。

转载于:https://www.cnblogs.com/snow-finland/p/4690155.html