图片懒加载之防抖节流
图片懒加载之防抖节流
- jquery 1.12.4
- 懒加载代码在文末
防抖
// 防抖
let throttle = function(fun, time){
let pre = new Date().getTime() ;
return ()=>{
let now = new Date().getTime() ;
if(now-pre >= time){
fun() ;
pre = now ;
}
}
}
防抖就是每隔time时间间隔内进行懒加载图片，是一个稳定的过程。
函数调用：
$(window).on('scroll', throttle (lazyload, 2000)) ;
节流
// 节流
let debounce = function(func, time){
let timer = null ;
return ()=>{
if(timer){
clearTimeout(timer) ;
}
timer = setTimeout(func, time) ;
}
}
节流的关键在于在多次触发函数，但是只认最后一次。但是这里有一个问题，要是有个贪玩的用户手不停地滚，只要永远都不会触发函数，所以还需要改进一下。
函数调用：
$(window).on('scroll', debounce(lazyload, 2000)) ;
防抖&节流
节流的问题在于不停或者在设置的time时间间隔内触发多次，这样造成函数不会调用的结果，这里可以结合防抖和节流解决这个问题。
let throunce = function(fun, time){
let timer = null ;
let pre = new Date().getTime() ;
return ()=>{
let now = new Date().getTime() ;
if(now-pre <= time){
if(timer){
clearTimeout(timer) ;
}
timer = setTimeout(func, time) ;
}else{
fun() ;
pre = now ;
}
}
}
在time时间内如果多次触发，就就只认最后一次，截他的流，但是大于time时间就进行触发该函数，而不会造成永远不会触发的情况。
页面代码
<html>
<head>
<title>lazyloadtitle>
<meta charset="utf-8">
<link rel="stylesheet" href="./lazyload.css">
<script src="./jquery-1.12.4.js">script>
<script src="./lazyload.js">script>
head>
<body>
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/12.png" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/11.png" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/10.png" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/2.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/3.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/4.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/5.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/1.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/6.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/13.png" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/7.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/8.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/9.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/2.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/5.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/1.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/6.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/13.png" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/7.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/8.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/9.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/2.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/5.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/1.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/6.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/13.png" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/7.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/8.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/9.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/2.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/5.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/1.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/6.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/13.png" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/7.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/8.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/9.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/2.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/5.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/1.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/6.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/13.png" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/7.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/8.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/9.jpg" src="./images//blank.gif" alt="">
<img data-src="http://www.jq22.com/demo/GridLoadingEffects/images/2.jpg" src="./images//blank.gif" alt="">
body>
html>
window.onload = function(){
let lazyload = lazy() ;
lazyload() ;
$(window).on('scroll', throunce(lazyload, 2000)) ;
$(window).on('resize', throunce(lazyload, 2000)) ;
$(window).on('orientationChange', throunce(lazyload, 2000)) ;
}
let lazy = function(){
let $imgs = $('img') ;
let prePosition = 0 ;
let wTop = $(window).height() ;
return function(){
let sTop = $(window).scrollTop() ;
$imgs.each(function(i){
let offsetTop = $(this).offset().top ;
if(sTop>=prePosition && sTop+wTop>=offsetTop){
prePosition = sTop ;
(function($that){
$that.attr('src', $that.attr('data-src')) ;
$that.addClass('scale') ;
})($(this)) ;
}
})
}
}
// 防抖
let throttle = function(fun, time){
let pre = new Date().getTime() ;
return ()=>{
let now = new Date().getTime() ;
console.log(now-pre >= time) ;
if(now-pre >= time){
fun() ;
pre = now ;
}
}
}
// 节流
let debounce = function(func, time){
let timer = null ;
return ()=>{
if(timer){
clearTimeout(timer) ;
}
timer = setTimeout(func, time) ;
}
}
// 防抖&节流
let throunce = function(fun, time){
let timer = null ;
let pre = new Date().getTime() ;
return ()=>{
let now = new Date().getTime() ;
if(now-pre <= time){
if(timer){
clearTimeout(timer) ;
}
timer = setTimeout(func, time) ;
}else{
fun() ;
pre = now ;
}
}
}