我试图加载页面上的所有图像(从 chrome 扩展端),然后在这些图像上执行一些代码,问题是有时网站会延迟加载图像(例如,当用户向下滚动到它们时) .
有什么方法可以确保所有这些都已加载吗?我尝试向下滚动到窗口底部,但这不适用于分页。
export function imagesHaveLoaded() {
return Array.from(document.querySelectorAll("img")).every(img => img.complete && img.naturalWidth);
}
return Promise.resolve()
.then(() => (document.scrollingElement.scrollTop = bottom))
.then(
new Promise((resolve, reject) => {
let wait = setTimeout(() => {
clearTimeout(wait);
resolve();
}, 400);
})
)
.then(() => {
console.log(document.scrollingElement.scrollTop);
document.scrollingElement.scrollTop = currentScroll;
})
.then(
new Promise((resolve, reject) => {
let wait = setTimeout(() => {
clearTimeout(wait);
resolve();
}, 400);
})
)
.then(until(imagesHaveLoaded, 2000))
.then(Promise.all(promises));
它加载延迟加载图像,但如果有更多延迟加载图像,它将无法工作(我需要加载图像本身而不是网址,以便我可以读取它的数据)
最佳答案
如果您想捕获加载到页面的每个新图像,您可以使用MutationObserver
,如下代码片段:
const targetNode = document.getElementById("root");
// Options for the observer (which mutations to observe)
let config = { attributes: true, childList: true, subtree: true };
// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
for(let mutation of mutationsList) {
if (mutation.addedNodes[0].tagName==="IMG") {
console.log("New Image added in DOM!");
}
}
};
// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
关于javascript - 加载页面上的所有图像并等待完成,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56100501/