图片的懒加载

末蓝、 2022-06-04 02:40 238阅读 0赞

有时候在一个界面上需要加载很多的图片，为了提升用户体验，使网页响应速度快，我们有时候会对图片进行相应的处理。处理方法分为：预加载和懒加载。

一：懒加载

1、懒加载定义：也就是延迟加载。当访问一个页面的时候，先把img的路径放在自定义的一个属性（例如：data-original）上保存，此时图片是还没有加载的，因为没有设置src属性，浏览器是不会发出请求去下载图片。如果事先知道图片的路径，可以直接在html中设置data-original的值，如果data-original的值是通过后台发送过来，那么就得在js中设置data-original的值。然后满足一定条件的时候，在js中从自定义的属性data-original上读取出路径值，赋给src-即设置真正的路径，让图片显示出来。

2、懒加载优点：网页加载速度快，减轻服务器压力，节约流量，用户体验好。

二、预加载

1、预加载定义：也就是提前加载图片到浏览器中，当需要时，再从本地缓存中渲染。

2、预加载的方法：

用css+js实现预加载

仅用js实现预加载

使用ajax实现预加载

详情请参考链接：[http://web.jobbole.com/86785/][http_web.jobbole.com_86785]

三、懒加载和预加载的比较

1、懒加载是延迟加载，对服务器、前端有一定的缓解压力

2、预加载是提前加载到浏览器中，对服务器、前端有一定压力

四、懒加载的例子

因为图片的地址是后台发回来的，所以需要在js中将地址赋给data-address(自己定义变量名)是。第一张图片不需要预加载，所以没有设置data-original。

这里还使用了masterslider.js插件，所以在<head>里面还需要引入masterslider.js，masterslider.main.css，ms-showcase2.css

1、html

2、css

body{
        width: 100%;
        min-width: 1380px;
        margin:0px;
        padding: 0px;
        /*position:relative;*/
        letter-spacing: 1px;
        font-size:15px;
        /*background-color: rgb(51, 51, 51);*/
        background-color: #edf0f2;
    }
    
    article{
        position: relative;
        padding: 0px;
        max-width:1000px;
        margin:87px auto;
        display:none;
    }

3、js

$(function(){
    	var activity_id = sessionStorage.getItem('activity_id'),
    	    user_id = sessionStorage.getItem('user_id'),
            slider = null,  //调用masterSlider.js,生成滚动的对象
            viewFlag = 1;
            // 初始化masterSlider一些参数
            initialMasterSlider();
    
            // 请求微信墙样式,即设置data-address
    	requestAllImgStyle();
    	
    	// 监听slider开始变化的事件，触发改变img的src时刻
    	slider.api.addEventListener(MSSliderEvent.CHANGE_START,function(){
       		// slider每改变一屏的时候触发
       		var index = slider.api.index();
       		if( index != 0){
       			load2img(index);
       		}
            });
      
        // 懒加载图片
        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);
        	}
        }
    
        // 设置masterSlider.js的一些参数
        function initialMasterSlider(){
        	slider = new MasterSlider();
        	// 设置大图容器的属性:最大的宽度和最大的高度
    		slider.setup('masterslider' , {
    			width:900,                     
    			height:450,
    			space:5,
    			view:'flow'
    		});
    		slider.control('arrows');	
    		slider.control('scrollbar' , {dir:'h'});	
    		slider.control('thumblist' , {autohide:false ,dir:'v',arrows:false});
        }
    
    	// 初始化的时候请求所有的样式
    	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('没有获取到数据');
    				$('#loding').hide();
    			}else{
    				addWallStyleToDOM(data);
    			}
    		});
    	}
    
    	// 将获取到的所有微信墙的样式加载到DOM里面
    	function addWallStyleToDOM(datas){
    		var len = datas.length,
    			data = null,
    			i = 0,
    			div_list = '',
    			en_name = '',
    			ch_name = '',
    			bigImgPreURL = globalConfig.pre_api_url + "/wall/style",
    			smallImgPreURL = globalConfig.pre_api_url + '/img',
    			bigImgSrc = '',
    			smallImgSrc = '',
    			bigImgObj = null,
                smallImgObj = null,
                cropedImgObj = $('#cropedBigImg');
    
    		for( ;i<len;i++ ){
    			data = datas[i];
    			en_name = data.en_name;
    			ch_name = data.ch_name;
    			bigImgObj = $('#'+i);
    			smallImgObj = $('#thumb'+i);
    
    			// 图片路径
    			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.jpg';
    				smallImgSrc = smallImgPreURL + '/' + en_name +'.jpg';
    			}
    			// 第一张不需要懒加载
    			if( i == 0 ){
    				bigImgObj.attr('src',bigImgSrc);
    			}else{
    				bigImgObj.attr('data-address',bigImgSrc);
    			}
    			
    			bigImgObj.attr('value',en_name);
    			bigImgObj.attr('title',ch_name);
    			smallImgObj.attr('src',smallImgSrc);
    			smallImgObj.attr('value',en_name);
    			smallImgObj.attr('title',ch_name);
    			if( i == len-1 ){
    		        // 显示“我选这张”按钮和article   src="image/addIcon.png"
    		        	$('#cropedBigImg').attr('data-address','image/addIcon.png');
    		            viewFlag = 3;
         				viewRefresh(viewFlag); 
    			}
    		}
    		                 
    	}
    });

下面这段代码是触发设置src的时刻

slider.api.addEventListener(MSSliderEvent.CHANGE_START,function(){
       		// slider每改变一屏的时候触发
       		var index = slider.api.index();
       		if( index != 0){
       			load2img(index);
       		}
        });

下面这段代码是设置src

// 懒加载图片
        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);
        	}
        }

[http_web.jobbole.com_86785]: http://web.jobbole.com/86785/