읽기 지연
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
//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
Reference
이 문제에 관하여(읽기 지연), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nakamo-03/items/120182cede209d594100텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)