如何观察HTMLCollection?

Question

如何观察HTMLCollection?

4

我有些好奇，因为我知道HTMLCollections会自动更新，所以我尝试使用Proxy进行观察，如下所示。


let imagesCollection = document.images;

let io = new Proxy(imagesCollection, {
    set: (target, prop, value, reciever) => {
        // do stuff
        // apply default behaviour
        return Reflect.set(target, prop, value);
    }
});

// test the block by adding new elements

document.body.insertAdjacentHTML("beforeend", "<img>");
document.body.insertAdjacentHTML("beforeend", "<img class='img'>");
document.body.insertAdjacentHTML(
    "beforeend",
    "<img class='img' src='https://picsum.photos/200/300'>"
);

但是当尝试动态添加一些图片时，没有任何反应...

所以我的问题是：

这是否可能？
如果是，我做错了吗？

- user10077398

5

使用变动观察器如何？ - evolutionxbox

@evolutionxbox, 让我快速检查一下。 - user10077398

这可能不完全是您要寻找的内容。通过观察集合，您试图解决什么问题？ - evolutionxbox

@evolutionxbox，是的，变异观察器确实能帮助React与添加的元素产生互动，但不能与集合产生互动。 - user10077398

我只是在寻找更好的图片懒加载解决方案，而使用观察集合的想法只是为了满足我的好奇心，因为它减少了研究领域并删除了MutationObserver回调中发现的循环。 - user10077398

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vsemozhebuty · Answer 1

如果我理解正确，代理拦截代理操作，而不是目标操作：

let target = {};

let proxy = new Proxy(target, {
    set: (target, prop, value, reciever) => {
        console.log(prop, value);
        return Reflect.set(target, prop, value);
    }
});

target.foo = 'I am not intercepted.';
proxy.bar = 'I am intercepted.';

所以在您的情况下，使用io的操作被拦截，而使用imagesCollection或document.images的操作没有被拦截。

因此，变异观察器是更好的选择。