皆さんこんにちは!これは私の最初のポスト- Wootです!私は最近、怠惰な負荷について学んできたものを共有するためにかなり興奮.どうか私は私がこれを改善する方法を教えてください!
怠惰なローディングイメージは、多くの内容でページを読み込むのに便利です.私たちは簡単にそのようなライブラリを見つけることができますyall.js and lozad.js . これらのライブラリのほとんどは共通しているIntersection Observer API . 使い方を学びましょうIntersectionObserver それで、私たちはこれらのライブラリがどのように働くかを理解することができます — またはも私たち自身を書く!
まず、簡単に説明するIntersectionObserver し、第二に、どのように怠惰ロード独自の画像を使用する.

IntersectionObserverは何をするか？

(素人の言葉で)IntersectionObserver 要素が先祖要素(通常ViewPort)と交差するとき、非同期に検出して、callback関数を呼び出します.

画像を含むビューポートを想像してください.いくつかのビューポートの下に座っている間、ページが読み込まれると、いくつかの画像がビューポート内に直接配置され、ユーザーが見られるようにスクロールするのを待っています.ユーザーのスクロールダウンとして、いくつかの低い位置の画像の上部は、最終的に下部ビューポートと交差するでしょう.最初の一番上のイメージピクセルがviewportと交差するとき、callback関数はイメージをロードします.

サンプル使用量

博士を読みましょう!Mozilla親切に出発点を与える.

var options = {
  root: document.querySelector('#scrollArea'),
  rootMargin: '0px',
  threshold: 1.0
}

var observer = new IntersectionObserver(callback, options);
var target = document.querySelector('#listItem');
observer.observe(target);

上記は、怠惰な荷への最小限のセットアップです#listItem (技術的なオプションはオプションですvar observer = new IntersectionObserver(callback); より簡潔な方法です.
ああ、より現実的なシナリオでそれを使用しましょう.次のようになります.

私たちは怠惰な負荷になるHTMLの10画像を持っている

CSSフェードアニメーションを追加

画像の読み込みにIntersectionObserverを追加する

HTMLセットアップ

<div><img data-src=”http://placehold.it/300x300?text=1"></div>
<div><img data-src=”http://placehold.it/300x300?text=2"></div>
<div><img data-src=”http://placehold.it/300x300?text=3"></div>
<div><img data-src=”http://placehold.it/300x300?text=4"></div>
<div><img data-src=”http://placehold.it/300x300?text=5"></div>
<div><img data-src=”http://placehold.it/300x300?text=6"></div>
<div><img data-src=”http://placehold.it/300x300?text=7"></div>
<div><img data-src=”http://placehold.it/300x300?text=8"></div>
<div><img data-src=”http://placehold.it/300x300?text=9"></div>
<div><img data-src=”http://placehold.it/300x300?text=10"></div>

あなたが気づくならば、それは使用しませんsrc でもdata-src 属性.怠惰なローディングのための1つの戦略は、HTMLdata-* 属性data-src 画像を読み込みません.

CSS設定

.fade {
 animation-duration: 3s;
 animation-name: fade;
}
@keyframes fade {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
}

この設定はオプションです.私は、我々の観察(それはプラス、より審美的に喜ばせる)がフェードアニメーションでイメージ怠惰な荷を持つのを助けると思います.
あなたがChrome DevToolを使用するならば、イメージがネットワークタブでダウンロードされるとき、あなたはチェックすることができます.

jsセットアップ

私は、それの50 %がviewportと交差するときだけ、イメージをロードしたいです.設定方法

const images = document.querySelectorAll(‘img’)
const observer = new IntersectionObserver(entries => {
 entries.forEach(entry => {
 if(entry.isIntersecting) {
 const target = entry.target
 target.setAttribute(‘src’, target.dataset.src)
 target.classList.add(‘fade’)
 observer.unobserve(target)
 }
 })
}, {
 threshold: 0.5
})
images.forEach(image => observer.observe(image))

私はIntersectionObserverを学習するときに理解するために苦労していたいくつかのことを強調したい.

引数のエントリは、IntersectionObserver (私はそれを少し奇妙に2回繰り返す必要があることを見つけるimages.forEach and entries.forEach , しかし、それが行われる方法です.初期ページロードでは、すべてのエントリが呼び出されます.いくつかのすぐに交差します(ページがレンダリングされたときに、ビューポート内にある場合)いくつかはありません.

entry.isIntersecting 画像がビューポートと交差するときにtrueを返します.Intersectionalityのもう一つの一般的なチェックは、そうですentry.intersectionRatio > 0 .

前に述べたように、怠惰なロードのための一般的な戦略は最初にsrc . から値を転送data-src to src ユーザーがそれを見ている前に右.

それがロードされた後にオブジェクトを観察するのは良い習慣です.
我々は、どちらかとの交差性の量または場所を変えることができますthreshold or rootMargin オプション.先祖の要素はrootで変更できます(デフォルトはviewport ).

結論

この執筆の時点で、IntersectionObserverはIEを除いて主要なブラウザーで使用可能ですcaniuse 完全なリストのためのサイト.IntersectionObserver は、データバックからsrcへの値をコールバック時に渡すことで、遅延ポートの要素をビューポートに対して便利である.他の要素にも同様の戦略を適用できる.
以下は記事に関する記事ですIntersectionObserver 私は役に立つ(私はそれらのいずれかと提携していません、ちょうど彼らが与えた情報に感謝します、そして、私はそれがあなたを助けると思います!)

fireship

alligatorio

googledev

あなたが間違いを見つけるか、私がこれを改善することができるならば、私に知らせてください.これまで読んでくれてありがとう.y ' allは素晴らしいです!