Intersection Observer を用ã„ãŸè¦ç´ 出ç¾æ¤œå‡ºã®æœ€é©åŒ– | blog.jxck.ioIntro スクãƒãƒ¼ãƒ«ã«ã‚ˆã‚‹ DOM è¦ç´ ã®å‡ºç¾ãªã©ã‚’効率よã検知ã™ã‚‹ãŸã‚ã€æ–°ã—ã Intersection Observer ã¨ã„ㆠAPI ãŒè¿½åŠ ã•ã‚ŒãŸã€‚ ã“ã® API ã®ä½¿ã„æ–¹ã¨ã€æœ¬ã‚µã‚¤ãƒˆã¸ã®é©ç”¨ã«ã¤ã„ã¦è¨˜ã™ã€‚ è¦ç´ 交差(intersection)ã®æ¤œå‡º ページをスクãƒãƒ¼ãƒ«ã—ã¦ã„ãéŽç¨‹ã§ã€ç‰¹å®šã® DOM ãŒç”»é¢ã«å‡ºç¾ã—ãŸã“ã¨ã‚’フックã—ãŸã„ケースãŒã‚る。 代表例㯠画åƒã®é…延èªã¿è¾¼ã¿ ã§ã‚ã‚Šã€åˆæœŸãƒãƒ¼ãƒ‰ã§ã¯ç”»åƒã®å–å¾—ã‚’è¡Œã‚ãšã‚¹ã‚¯ãƒãƒ¼ãƒ«ã—ã¦ã„ãéŽç¨‹ã§é †æ¬¡å–å¾—ã™ã‚‹æ‰‹æ³•ã§ã‚る。 特ã«ç”»åƒã®å¤šã„ページã§ã¯è¡¨ç¤ºã«å¿…è¦ãªãƒªã‚½ãƒ¼ã‚¹å–å¾—ã®ã¿ã«æœ€é©åŒ–ã§ãã€åˆæœŸç”»é¢è¡¨ç¤ºãªã©ã§ã¯åŠ¹æžœãŒå¤§ãã„ã¨ã•ã‚Œã‚‹ã€‚ ã“れを実装ã™ã‚‹ã®ã«å¿…è¦ãªã®ã¯ã€ã€Œ <img> è¦ç´ ãŒå‡ºç¾ã—ã¦ã„ã‚‹ã‹ã©ã†ã‹ã€ã§ã‚ã‚‹ãŒã€æœ¬è³ªçš„ã«ã¯ã€Œç”»é¢å¤–ã«ã‚ã£ãŸ <img> ㌠viewport ã¨äº¤å·®ã—ãŸã‹ã€ã‚’å–å¾—ã™ã‚‹ã“ã¨ã«ãªã‚‹ã€‚ ã¤ã¾ã‚Šã€ è¦ç´ 出ç¾ã®å–å¾—
エã‚スパートãŸã¡ãŒèªžã‚‹ã€Webパフォーマンス最新テクニック
{{#tags}}- {{label}}
{{/tags}}