읽기 지연

IntersectionObserver


Intersection Observer API를 직역하면 교차 감시 API의 이름입니다.이것은 요소와 요소가 교차하는 것을 감지하는 API입니다.(참조: https://ics.media/entry/190902/

일반 읽기 지연


예전에 스크롤 이벤트랑...
lazyload 등 프로그램 라이브러리를 사용하여 읽기 지연을 진행합니다.

InterSectionObserver를 사용하는 이유


Seo 성적인 느낌이 좋아요.
Googlebot 인식 가능
• 공연상 괜찮아 보인다
스크롤 사건처럼 요소의 위치를 끊임없이 확인하는 것을 피하다
* 참조: https://liginc.co.jp/498877
그 외에 개인
• 라이브러리를 읽지 않고 JavaScript로 직접 설치 가능
• 자바스크립트를 써야 하기 때문에 설치하는 느낌을 느낄 수 있겠지
그래서 이번에 써봤어요.

실제로 써봤어요.


See the PenqBZLyzX by도 모르겠다@nakamoto_yuto
on CodePen .

감상


생각보다 간단히 이루어져 가볍다

현장의 자바스크립트로 썼기 때문에 실감나고 즐거웠어요.br/>
Babel polyfill로 IE에 대응하려고 했는데 그 정도는 못 했어

하면, 만약, 만약...만약 이런 사람이 있다면, 반드시 나에게 알려주십시오. 나는 매우 기쁠 것입니다p>

IE 대응


이번엔 intersection-observer라는 npm을 사용해 IE 대응br/>
npm의 문서에 대응하는 몇 가지 방법이 쓰여 있는데, 먼저 실제 진행하는 방법을 소개한 다음에 다른 방법을 소개한다.p>

이번 방법(npm 설치 및 대응)


//terminalにて intersection-obseverをインストール
$npm install --save-dev intersection-observer

설치 후 읽기 지연된 js 파일에서


import 'intersection-observer'; // intersection-observerをimportし対応。

const lazyLoad = function () {
    // ターゲット指定
    const targets = Array.from(document.querySelectorAll("img[data-src]"));
    const img_path = "data-src";
    const options = {
      // 上下100px手前で発火
      rootMargin: "100px 0px"
    };
.....下記省略

또는



require('intersection-observer'); 

const lazyLoad = function () {
    // ターゲット指定
    const targets = Array.from(document.querySelectorAll("img[data-src]"));
    const img_path = "data-src";
    const options = {
      // 上下100px手前で発火
      rootMargin: "100px 0px"
    };

기술량이 상당히 적기 때문에 가볍습니다!


HTML에서 npm 읽기 지원


<!-- Load the polyfill first.(IE対応するためのnpmを最初に読み込む) -->
<script src="path/to/intersection-observer.js"></script>

<!-- Load all other JavaScript. -->
<script src="app.js"></script> <!-- 遅延読み込みを行うjsファイル -->

모듈식 휠을 통한 읽기 및 대응(Webpack 또는 Browserify)


// Require the polyfill before requiring any other modules.
require('intersection-observer');

require('./foo.js');
require('./bar.js');

끝말


IntersectionObserver는 다른 것에 비해 가져오기 원가도 거의 변하지 않고 매우 가볍다
js라고 쓰여있는 기분이 좋아서 한 번도 안 써본 사람이 있다면 추천합니다!


문장을 인용하다


ics.미디어 JS에서 스크롤 연결 효과는 Intersection Observer가 편리합니다.

그림을 읽는 데 지연을 시도해 보세요!Intersection Observer 편

lazyload


좋은 웹페이지 즐겨찾기