この記事は 「DeNA IPプラットフォーム事業部 Advent Calendar 2017」 13日目の記事です。 こんにちは。 @yukagil です。 マンガボックスという、スマホ向け電子書籍サービスのサーバーサイド/フロントエンドの担当をしています。 前回は「Perlの行列演算モジュールを用いた推薦システムの実装」の紹介をしたのですが、 今回は「要素の画面内判定をどのようにして行うか」という話を中心に、個人的にもっと知られてほしいと思っているLozad.jsの紹介をします。 はじめに Webサイトの実装(特にスマホ)をする際に、「ある要素が画面内にあるかどうか」の判定が必要になる場面って結構あるかと思います。 ユースケースとしては、 LoadMore(無限スクロール) LazyLoad(遅延読み込み) Log(全体の何%読まれたか等) 画面内に入ったタイミングでアニメーションを実行
![IntersectionObserveの遅延読み込みライブラリのLozad.jsを紹介する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/28189d99b2d5409d271438c76b6d8c03f5a1f36f/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9SW50ZXJzZWN0aW9uT2JzZXJ2ZSVFMyU4MSVBRSVFOSU4MSU4NSVFNSVCQiVCNiVFOCVBQSVBRCVFMyU4MSVCRiVFOCVCRSVCQyVFMyU4MSVCRiVFMyU4MyVBOSVFMyU4MiVBNCVFMyU4MyU5NiVFMyU4MyVBOSVFMyU4MyVBQSVFMyU4MSVBRUxvemFkLmpzJUUzJTgyJTkyJUU3JUI0JUI5JUU0JUJCJThCJUUzJTgxJTk5JUUzJTgyJThCJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmcz0yYWM5MzdiZDFkN2JkOTJkNzkzNzYxYzEwOWU4NjI2NA%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDB5dWthZ2lsJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz1kODM1ZTU3Njg3NTRjYmVmNDMzMTZjMGM4MDA3NTY4Yg%26blend-x%3D120%26blend-y%3D445%26blend-mode%3Dnormal%26txt64%3DaW4g5qCq5byP5Lya56S-U2hvd2Nhc2UgR2ln%26txt-width%3D972%26txt-clip%3Dend%252Cellipsis%26txt-color%3D%25233A3C3C%26txt-font%3DHiragino%2520Sans%2520W6%26txt-size%3D36%26txt-x%3D134%26txt-y%3D546%26s%3Dca806d302fc388932adf08c5fd6f8459)