everyone.
(大家。)
I've got gallery of 1609 images and I'm trying to configure images lazy loading with Intersection observer API and stuck with the problem, that no matter what, I've got all of them to be uploaded instantly, meaning that lazy loading doesn't work.
(我有1609张图像的库，并且我正在尝试使用Intersection Observer API配置图像延迟加载，并且遇到了问题，无论如何，我已将所有图像立即上传，这意味着延迟加载不会不行)
Here's full code listing for the simple testing page below: (以下是简单测试页面的完整代码清单：)
<?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>
First thing I checked was "isIntersecting" property and for some reason, all 1609 images returns "true" while only about 20-30 of them should have this value.
(我检查的第一件事是“ isIntersecting”属性，由于某种原因，所有1609张图像均返回“ true”，而其中只有大约20-30张应具有此值。)
Run out of ideas why it behaves this way.
(用尽想法为什么它会以这种方式运行。)
Any hint please? (有什么提示吗？)
ask by Drezor Warlock translate from so 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
