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

╰+攻爆jí腚メ 2022-06-01 09:05 314阅读 0赞

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

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

1、先加载slider所需文件

2、html如下

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);
    			   		}
        			});
    
    		  
    
    			}
    		}
    		                 
    	}
    
    
    });