//懒加载
//保存图片路径
// 给待加载图片一张默认图
//使用data-src属性保存图片的真正地址
//监听页面scroll事件
// 手机当前进入页面的图片元素
// 给src赋值真正地址
//已加载的给加标记
//函数节流,滚动性能提升
//生成图片节点
function genLazyImg(){
var str = '';
for(var i = 1 ;i < 11;i++){
var name = 'img/scr'+i+'.jpg';
var img = '<li class="item"><img data-src="'+name+'"' +
' src="img/zh.jpg" /></li>';
str+=img;
}
return str;
}
//加载窗口中的图片
function loadImg(){
//这些变量可以外提
var winHeight = $(window).height();
var imgItems = $('ul img');
imgItems.each(function(index,img){
var $img = $(img);
//判断是否在屏幕可视区
var top = img.getBoundingClientRect().top;
if(top <= winHeight){
if($img.data('load') == 1)return;
$img.attr('src',$img.data('src'));
$img.data('load',1)
}
})
}
var imgs = genLazyImg();
$('ul').html(imgs);
//
// $(window).scroll(function () {
// console.log('scroll')
// loadImg()
// })
//对scroll事件函数节流 新能优化
//经常用的方法为以下这个方法throttle,也可以了解debounce
//来降低函数的调用频率
function throttle(fn,delay,scope){
//时间间隔250s
delay || (delay = 250);
var last,
deferTimer;
return function () {
var context = scope || this ;
var now = +new Date();
args = arguments;
done_fn = function (immediate) {
last = immediate ? now : +new Date();
deferTimer = null ;
fn.apply(context,args);
};
if(last === undefined || (now - last) >= delay){
clearTimeout(deferTimer);
return done_fn(true);
}
//deferTimer !===null 就会组织一次动作结束后,新的一轮动作在结束时,应该会有一次动作的行为
deferTimer === null && (deferTimer = setTimeout(done_fn,delay))
}
}
var lazyLoad = throttle(function () {
console.log('scroll');
loadImg()
})
$(window).scroll(function () {
lazyLoad()
})
函数节流(throttle):是让一个函数无法在很短的时间间隔内连续调用,当上一次函数执行后过了规定的时间间隔,才能进行下
一次该函数的调用。
函数去抖(debounce):让一个函数在一定间隔内没有被调用时,才开始执行被调用方法。
两个方法都是用来提升前端性能,减轻浏览器压力。
这两个方法适用于会重复触发的一些事件,如:mousemove,keydown,keyup,keypress,scroll等。如果只绑
定原生事件,不加以控制,会使得浏览器卡顿,用户体验差。为了提高js性能,建议在使用以上及类似事件的时候用
函数节流或者函数去抖加以控制。
function debounce(fn, delay) {
var timer = null;
return function () {
var context = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
};
}
$('input.username').keypress(debounce(function (event) {
// do the Ajax request}, 250)
);