有时候在一个界面上需要加载很多的图片，为了提升用户体验，使网页响应速度快，我们有时候会对图片进行相应的处理。处理方法分为：预加载和懒加载。
一：懒加载
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-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);
}
}
扫一扫
4422
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
