ステップアップタスク16怠け者ロード

タイトル1:ウィンドウの表示範囲(ブラウザの上端と下端の間、肉眼で表示)に要素が表示されているかどうかを判断する方法.関数isVisible実装を書く

    function isVisible($node) {
      var scroHeight = $(window).scrollTop();
      var windowHeight = $(window).height();
      if($node.offset().top scroHeight) {
        return true
      }  
        return false
  }  

タイトル2:ウィンドウがスクロールすると、1つの要素がウィンドウの可視範囲に現れるかどうかを判断します.表示されるたびにコンソールにtrueを印刷します.コードで実現

 $(window).on('scroll',function() {
   function isVisible($node) {
      var scroHeight = $(window).scrollTop();
      var windowHeight = $(window).height();
      if($node.offset().top scroHeight) {
        console.log('true')
    }
})

タイトル3:ウィンドウがスクロールすると、1つの要素がウィンドウの可視範囲に現れるかどうかを判断します.エレメントが最初に表示されるとコンソールにtrueが印刷され、その後は処理されません.コードで実現

 var isAppear = false  //       false；
  $(window).on('scroll',function() {
   function isVisible($node) {
      if (!isAppear) {   //      true       
      var scroHeight = $(window).scrollTop()
      var windowHeight = $(window).height()
      var $nodeTop = $node.offset().top

      if( $nodeTop  scroHeight) {
        console.log ('true')
        }
        isAppear=true  //   true ，     true，        
      }
   }
    isVisible($node)  
 })

题目4:写真の怠惰なロードの原理は何ですか?1つのページにアクセスするときは、まず要素のピクチャパスを同じパスに設定し、一度だけ要求し、要素がウィンドウの可視領域に入ったときに、要素のピクチャを本当のピクチャパスに設定して、ピクチャを表示させます.
タイトル5効果プレビュー