使用 Intersection Observer 实现图片延迟加

作者: _____西班木有蛀牙 | 来源:发表于2018-06-20 18:16 被阅读17次

使用 Intersection Observer 实现图片延迟加
谈谈IntersectionObserver懒加载
Intersection Observer 简介
Intersection observer will not t
图片懒加载
JS
js 实现图片懒加载
手动实现一个MVVM框架(下)
基于Rabbitmq实现延迟队列
2020-05-28-Android-RxJava

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>使用 Intersection Observer 实现图片延迟加载</title>
    <link href="https://cdn.bootcss.com/materialize/1.0.0-beta/css/materialize.min.css" rel="stylesheet">
    <style>
        img {
            width: 100%;
            margin: 15px 0;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <img class="js-lazy-image" width="996" height="664" data-src="images/1.jpg" alt="">
            </li>
            <li>
                <img class="js-lazy-image" width="996" height="560" data-src="images/2.jpg" alt="">
            </li>
            <li>
                <img class="js-lazy-image" width="996" height="748" data-src="images/3.jpg" alt="">
            </li>
        </ul>
    </div>
    <script>
        function preloadImage(image) {
            image.setAttribute('src', image.dataset.src)
        }

        // Get all of the images that are marked up to lazy load 
        const images = document.querySelectorAll('.js-lazy-image');
        const config = {
            // If the image gets within 50px in the Y axis, start the download. 
            rootMargin: '50px 0px',
            threshold: 0.01
        };
        // If we don't have support for intersection observer, load the images immediately
        if (!'IntersectionObserver' in window) {
            console.log(123)
            Array.from(images).forEach(image => preloadImage(image));
        } else {
            // The observer for the images on the page 
            let observer = new IntersectionObserver(onIntersection, config);
            
            function onIntersection(entries) {
                // Loop through the entries
                entries.forEach(entry => {
                    // Are we in viewport? 
                    if (entry.intersectionRatio > 0) {
                        // Stop watching and load the image
                        observer.unobserve(entry.target);
                        preloadImage(entry.target);
                    }
                });
            }

            images.forEach(image => {
                observer.observe(image);
            });
        }
    </script>
</body>

</html>