masterslider支持动态加载数据，懒加载图片

使用masterslider动态加载图片，并且懒加载图片，使网页运行更快

思路：先动态获取到图片的url，将url赋给<img>的一个自定义属性address-src，当获取完数据之后，在使用setup()函数对slider进行初始化；当slider的Index改变的时候，在j将address-src的值赋给src。这样会加快网页渲染速度，因为只有遇到src有值的时候，浏览器才会解析它。

1、先加载slider所需文件

<link rel='stylesheet' href='css/ms-showcase2.css' type='text/css' media='all' />  
<link rel='stylesheet' href='css/masterslider.main.css' type='text/css' media='all' />  
  
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>  
<script type='text/javascript' src='js/masterslider.js'></script>  
<script type='text/javascript' src='js/jquery.easing.min.js'></script>  

2、html如下

        <div class="ms-showcase2-template ms-dir-v"> 
            <!-- masterslider -->
            <div class="master-slider ms-skin-default" id="masterslider">
                
            </div>
          <!-- end of masterslider --> 
        </div>

3、js如下：

$(function(){
	
	 activity_id = sessionStorage.getItem('activity_id'),
	 user_id = sessionStorage.getItem('user_id'),
	 slider = new MasterSlider(),                //调用masterSlider.js,生成滚动的对象

    
        //初始化slider
	slider.control('arrows');	
	slider.control('scrollbar' , {dir:'h'});	
	slider.control('thumblist' , {autohide:false ,dir:'v',arrows:false});
	slider.__needsSnap = 1;

       // 请求微信墙样式
	requestAllImgStyle();


  
    // 懒加载图片
    function load2img(index){
    	var totalSlider = slider.api.count(),
    	    pageImg = null,
    	    imgSrc = '';

    	if( index == totalSlider-1 ){
    		// slider的下标从0开始，到了最后一张slider特殊处理
    		pageImg = $('#cropedBigImg');
    		imgSrc = pageImg.attr('data-address');
    		pageImg.attr('src',imgSrc);
    	}else{
    		pageImg = $('#'+index),
    		imgSrc = pageImg.attr('data-address');
    		pageImg.attr('src',imgSrc);
    	}
    }

	// 初始化的时候请求所有的样式
	function requestAllImgStyle(){
		var url = globalConfig.pre_api_url + "/wxwall_api/activity/get_wall_styles.php",
			data = {
				'activity_id':activity_id
			};
		
		request(url,data,function(res){
			console.log(res.msg);
			var data = res.data;

			if( data == false || data == undefined ){
				error_prompt_alert('没有获取到数据');	
			}else{
				addWallStyleToDOM(data);
			}
		},function(res){
			
			alert(res.msg);
		});
	}

	// 将获取到的所有微信墙的样式加载到DOM里面
	function addWallStyleToDOM(datas){
		var len = datas.length,
			data = null,
			en_name = '',
			ch_name = '',
			bigImgPreURL = globalConfig.pre_api_url + "/wall/style",
			smallImgPreURL = globalConfig.pre_api_url + '/img',
			bigImgSrc = '',
			smallImgSrc = '';



        $('#masterslider').empty();
		for(var i = 0 ;i<len;i++ ){
			data = datas[i];
			en_name = data.en_name;
			ch_name = data.ch_name;
			var imgList = '';

			// 图片路径
			if( en_name == 'custom' ){
				// 自定义微信墙样式
				bigImgSrc = bigImgPreURL + '/' + en_name + '/images/' + activity_id + '/kuxuan.jpg';
				smallImgSrc = smallImgPreURL + '/custom_style/' + activity_id +'/' + en_name +'.jpg';
			}else{
				bigImgSrc = bigImgPreURL + '/' + en_name + '/images/kuxuan_middle.jpg';
				smallImgSrc = smallImgPreURL + '/' + en_name +'.jpg';
			}
            
            
        	// 第一张大图不需要懒加载
        	if(i==0){
	        	imgList = '<div class="ms-slide">' +
	                        '<img id="'+i+'" alt="lorem ipsum dolor sit" value="'+en_name+'"  title="'+ch_name+'"  src="'+bigImgSrc+'"/> ' +
	                        '<img class="ms-thumb" alt="thumb" id="thumb'+i+'"  src="'+smallImgSrc+'"  value="'+en_name+'"  title="'+ch_name+'"/>' + 
	                      '</div>'; 
            }else{
            	imgList = '<div class="ms-slide">' +
                            '<img id="'+i+'" alt="lorem ipsum dolor sit" value="'+en_name+'"  title="'+ch_name+'"  data-address="'+bigImgSrc+'"/> ' +
                            '<img class="ms-thumb" alt="thumb" id="thumb'+i+'"  src="'+smallImgSrc+'"  value="'+en_name+'"  title="'+ch_name+'"/>' + 
                          '</div>'; 
            }

            $('#masterslider').append(imgList);

			if( i == len-1 ){

				// 加载自定义的图片
				imgList =  '<div class="ms-slide">'+
                               '<img id="cropedBigImg" value="custom" alt="lorem ipsum dolor sit" data-address="image/addIconBig.jpg"  title="自定义背景"/>'+ 
                               '<img class="ms-thumb" value="custom"  id="customImg" title="自定义背景" src="image/addIconSmall.jpg" alt="thumb" data-toggle="modal" data-target="#myModal"/>' +
                           '</div>'; 
                $('#masterslider').append(imgList);
				
    	        // 获取完最后一张图片之后,使用setup()函数初始化slider
				slider.setup('masterslider' , {
					width:900,                     
					height:450,
					space:5,
					view:'flow',
				});


   				//监听slider滑动事件触发加载图片
   				slider.api.addEventListener(MSSliderEvent.CHANGE_START,function(){
			   		// slider每改变一屏的时候触发
			   		var index = slider.api.index();
			   		if( index != 0){
			   			load2img(index);
			   		}
    			});

		  

			}
		}
		                 
	}


});