画像怠惰ロードのブレ防止スロットル

66410 ワード

実践を拡張する. 先端 javascript jquery

画像怠惰ロードのブレ防止スロットル

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 ;    

    }
  }

}

jQuery EasyUI API中国語ドキュメント-Documentationドキュメント

jQueryのアニメーションキュー