Visible,画像怠け者ロード

は、1つの要素がウィンドウの可視範囲(ブラウザの上端と下端の間、肉眼で可視)に現れるかどうかをどのように判断します.関数isVisible実装

を書く

$.fn.isVisible = function(){
    var nodeT = $(this).offset().top,
        screenH = $(window).height(),
        scrollT = $(document).scrollTop()
    if(nodeT > scrollT&&nodeT

ウィンドウがスクロールすると、1つの要素がウィンドウの可視範囲に現れるかどうかを判断します.表示されるたびにコンソールにtrueを印刷します.コードによるコード効果プレビュー

$(document).on('scroll',function(){
     var $target = $('.box-target')
     if($target.isVisible()) {
         console.log(true)
     }
})

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

 function isLoad($target) {
     if (!$target.data('isLoad')) {
         console.log(true)
         $target.data('isLoad',true)
     }
 }
 $(document).on('scroll',function(){
     var $target = $('.box-target')
     if($target.isVisible()) {
         isLoad($target)
     }
})

画像の怠け者のロードの原理は何ですか?

ピクチャの怠け者ロードは、実際にはピクチャと呼ばれる遅延ロード

である.

は、ページのレンダリング速度を最適化するために、ユーザの可視範囲内に現れる画像を

にロードすることを目的とする.

実現原理ピクチャは、まず1枚の占有ピクチャを用いて表示することができ、真実のピクチャアドレスは1つのカスタム属性に保存され、ピクチャがウィンドウの範囲内に現れると、真実のアドレスを占有ピクチャのアドレス

に置き換える.