Question

所有人。

我有1609张图像的库，并且我尝试使用Intersection Observer API配置图像的延迟加载，并解决了这个问题，无论如何，我已经将所有图像立即上传，这意味着延迟加载不起作用。以下是简单测试页面的完整代码清单：

    <?php 

    $listOfFolders = scandir(__DIR__);
    $images = [];


    foreach ($listOfFolders as $folder) {
        if($folder == "." || $folder == ".." || $folder == "index.php")
        {
            continue;
        } else {
            $innerFolders = scandir("./".$folder);
            foreach ($innerFolders as $innerFolder) {
                if($innerFolder == "." || $innerFolder == ".." || $innerFolder == "index.php")
                {
                    continue;
                } else {
                    $imagesList = scandir('./'.$folder.'/'.$innerFolder);
                    foreach ($imagesList as $image) {
                        if($image == "." || $image == ".." || $image == "index.php"){
                            continue;
                        } else {
                            array_push($images, ($folder.'/'.$innerFolder.'/'.$image));
                        }
                    }
                }
            }
        }
    }
?>

<!DOCTYPE html>
<html>
<head>
    <title>Lazy Loading testing</title>
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>



        <style type="text/css">

            .images-wrapper
            {
                display: flex;
                flex-wrap: wrap;
            }

            .images-wrapper .image-wrapper
            {
                max-width: 25%;
                width: 100%;
                margin-bottom: 15px;
            }

            .images-wrapper .image-wrapper img
            {
                max-width: 100%;
                min-height: 100px;
                background-color: #000;
            }
        </style>


</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <div class="images-wrapper">
                    <?php foreach ($images as $image): ?>
                        <div class="image-wrapper">
                            <img data-src="<?php echo './'.$image; ?>">
                        </div>
                    <?php endforeach ?>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
                let options = {
                    root: null,
                    rootMargin: "0px 0px -150px 0px",
                    threshold: 1.0
                }

                let observer = new IntersectionObserver(
                    (entries, self) => {
                        entries.forEach(entry => {
                            console.log(entry.isIntersecting);
                            if(entry.isIntersecting){
                                preloadImage(entry.target);
                                self.unobserve(entry.target);
                            }
                        });
                    }, options);

                let imgs = document.querySelectorAll('[data-src]');
                imgs.forEach(img => {
                    observer.observe(img);
                });

                function preloadImage(img)
                {
                    let imgDataSrcAttr = img.getAttribute('data-src');
                    img.setAttribute("src", imgDataSrcAttr);
                }
            </script>


    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.4/js/bootstrap.min.js"></script>
</body>
</html>

我检查的第一件事是“ isIntersecting”属性，由于某种原因，所有1609张图像均返回“ true”，而其中只有大约20-30张应具有此值。

用尽想法为什么会这样。有什么提示吗？

Answer 1

好像我找到了问题的根源：父容器的 display：flex 。

我的猜测是，由于此CSS属性最初将一行中的所有图像排列在一起，而JS认为所有图像都位于指定的矩形中以进行图像加载。看来 flex-wrap：wrap 的使用不会改变任何内容-只是使图像看起来像被分成几行-对于JS，它们仍然在观察到的矩形内成行排列< / p>

图像因Intersection Observer API问题而延迟加载

1 个答案: