每个人。
我有 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 个应该具有此值。
不知道为什么会这样。有什么提示吗？
看来我已经找到问题的根源了：显示：柔性对于父容器。
我的猜测是，由于这个 CSS 属性最初将所有图像排列在一行中，并且 JS 认为所有图像都位于指定的矩形中以进行图像加载。看来使用弹性包裹：包裹不会改变任何东西 - 只是使图像看起来像是被分成行 - 对于 JS，它们仍然在观察到的矩形内排列成行
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
