图片的懒加载

来源：互联网发布：重庆网络推广公司排名编辑：程序博客网时间：2024/04/30 02:38

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

一：懒加载

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/

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

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

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

四、懒加载的例子

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

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

<script src="http://i.gtimg.cn/qzone/biz/gdt/lib/jquery/jquery-2.1.4.js?max_age=31536000"></script>

<script type='text/javascript' id='masterSliderJs' src='js/masterslider.min.js?v=91489dfd17'></script>

<link rel='stylesheet' href='css/ms-showcase2.css?v=e41f80ce12'/><link rel='stylesheet' href='css/masterslider.main.css?v=1dba4608d6'/>

1、html

    <article id="articleBox">        <div class="ms-showcase2-template ms-dir-v">             <!-- masterslider -->            <div class="master-slider ms-skin-default" id="masterslider">                <div class="ms-slide">                    <img id="0" alt="lorem ipsum dolor sit"/>                     <img class="ms-thumb" alt="thumb" id="thumb0"/>                 </div>                  <div class="ms-slide">                    <img id="1" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb1"/>                 </div>                 <div class="ms-slide">                    <img id="2" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb2"/>                 </div>                 <div class="ms-slide">                    <img id="3" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb3"/>                 </div>                 <div class="ms-slide">                    <img id="4" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb4"/>                 </div>                <div class="ms-slide">                    <img id="5" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb5"/>                 </div>                  <div class="ms-slide">                    <img id="6" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb6"/>                 </div>                 <div class="ms-slide">                    <img id="7" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb7"/>                 </div>                 <div class="ms-slide">                    <img id="8" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb8"/>                 </div>                 <div class="ms-slide">                    <img id="9" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb9"/>                 </div>                <div class="ms-slide">                    <img id="10" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb10"/>                 </div>                <div class="ms-slide">                    <img id="11" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb11"/>                 </div>                  <div class="ms-slide">                    <img id="12" alt="lorem ipsum dolor sit" data-address=''/>                     <img class="ms-thumb" alt="thumb" id="thumb12"/>                 </div>                  <div class="ms-slide">                    <img id="cropedBigImg" value='custom' alt="lorem ipsum dolor sit" data-address='' title="自定义背景"/>                     <img class="ms-thumb" value='custom' id="customImg" title="自定义背景" src="image/addIcon.png" alt="thumb" data-toggle="modal" data-target="#myModal""/>                 </div>            </div>          <!-- end of masterslider -->         </div>    </article>

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-addressrequestAllImgStyle();// 监听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);    }    }

阅读全文

0 0