如何在加载元素的内容时运行函数.从服务器加载更多项

Question

我正在从服务器加载并追加更多项目到div。当它们完全加载时，我想运行一个函数来刷新colcade布局(reloadColcade)。

我已经尝试添加一个事件监听器的div选项，如'load'和'DOMContentLoaded'，divElement.addEventListner('option', reloadColcade)，但事件没有被触发。

当我尝试setTimeout来等待元素加载时，函数要么调用得太早，要么调用得太晚。

<div class="articles-container grid" data-articles-grid="">
<div class="grid-col grid-col--1"></div>
<div class="grid-col grid-col--2"></div>
<div class="grid-col grid-col--3"></div>
<% products.forEach(product => { %>
<% const date = product.createdAt.toISOString().split('T')[0].replaceAll('-', '/'); %> 
<article class="ver-spacer grid-item" id="<% product._id %>">
<img src="<%= product.optimizedImgUrl %>" data-original-img-source="<%= product.imgUrl %> " alt="article photo" class="articles-container__article-img">
<h2><%= product.title %></h2>
<p><%= product.description %> <button class="articles-container__highlight">Read more</button></p>
<div class="articles-container__article-info separetor"><p>Price: <%= product.price  %> &#36</p><p>Author: <%= product.authorName %> </p><p>Uploaded: <%= date %></p> <p>Resolution: <%= product.resolution %></p></div>
<button class="btn-gray articles-container__button ai-c">Add <img src="img/shopping-cart.svg" alt="shopping cart"></button>
</article>
<% }); %>
</div>

let colc, colcUploadedByUser, colcPurchasedByUser;
let searchQuery, filter;
const loadMore = async function () {
let startIndex = 0;
startIndex += 5;
const searchQuery = searchForm.querySelector("input").value;
const filter = searchForm.querySelector("select").value;
const response = await fetch("load-more", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
startIndex,
searchQuery,
filter,
}),
});
const products = await response.json();
let itemsToAppend = [];
products.forEach((product) => {
const date = new Date(product.createdAt)
.toISOString()
.split("T")[0]
.replaceAll("-", "/");
const htmlString = `
<img src="${product.optimizedImgUrl}" data-original-img-source="${product.imgUrl}" alt="article photo" class="articles-container__article-img">
<h2>${product.title}</h2>
<p>${product.description} <button class="articles-container__highlight">Read more</button></p>
<div class="articles-container__article-info separetor"><p>Price: ${product.price} &#36</p><p>Author: ${product.authorName} </p><p>Uploaded: ${date}</p> <p>Resolution: ${product.resolution}</p></div>
<button class="btn-gray articles-container__button ai-c">Add <img src="img/shopping-cart.svg" alt="shopping cart"></button>
`;
const item = document.createElement("article");
item.className = "ver-spacer grid-item";
item.setAttribute("id", product._id);
item.insertAdjacentHTML("beforeend", htmlString);
itemsToAppend.push(item);
});
colc.append(itemsToAppend);
};
// Colcade
if (document.querySelector(".grid")) {
colc = new Colcade(".grid", {
columns: ".grid-col",
items: ".grid-item",
});
}
const reloadColcade = function () {
colc && colc.layout();
colcUploadedByUser && colcUploadedByUser.layout();
colcPurchasedByUser && colcPurchasedByUser.layout();
};

Answer 1

我使用colcade作者创建的库imagesloaded解决了这个问题，如下所示:

import * as imagesloaded from "./node_modules/imagesloaded/imagesloaded.pkgd.min.js";
imagesLoaded(colc.element, function () {
reloadColcade();
});