javascript - 我如何使用 JS 或 jQuery 在 DOM 元素上运行函数，因为它们是延迟加载的？

Question

一旦存在特定的 DOM 元素，我就会使用这个基本间隔和回调来运行一个函数。

function ready(elem, callback) {
    let loaded = setInterval(function(){
        if ( document.querySelectorAll(elem).length ) {
            clearInterval(loaded);
            callback();
        }
    }, 100);
}

ready('elem', function(){
    //code here
});

现在我需要一种方法来在元素延迟加载到 DOM 时一个接一个地运行函数。当我向下滚动页面时，图像会延迟加载，并带有这样的虚假 src 属性：<img src="/blank.jpg">. 然后一个我无法控制的脚本运行，并将 src 调整为实际图像。所以，我需要一个脚本来等待这些延迟加载的图像存在，然后等待源不再是伪造的。

我知道当 src 包含某个子字符串时，它不再是伪造的 - 例如 "foo": <img src="/imgnamefoo.jpg">。我知道有多少图像应该打到页面上，因为我从全局对象中提取了数量。此外，图像具有编号的 ID (id="someid_1")，但我不想像现在这样依赖它。我目前的方法是等待最后一个图像存在，检查该图像上的子字符串，然后同时在所有图像上运行该函数。但是，我想在图像出现时运行它，因此等待用户一直向下滚动到最后一张图像的延迟更少。它们将在它们出现时被简单地处理。

我当前等待最后一个 img 存在的代码：

window.quantity = object.images.length;

function ready(elem, callback) {
    let loaded = setInterval(function(){
        var src = document.querySelectorAll(elem)[0].getAttribute('src');
        if ( src.indexOf('foo') !== -1 ) {
            clearInterval(loaded);
            callback();
        }
    }, 100);
}

ready('#someid_' + window.quantity, function(){
    // code here
});

如果预计延迟加载 7 张图像，则当此元素存在时会触发该函数：

<img id="someid_7" src="/imgnamefoo.jpg">

编辑：我试过这个来尝试在重写 src 属性时触发我的代码：

$(document).on('load', 'img[src*="blank.jpg"]', function(){
    //code here    
});

而且我也试过这个，怀疑可能 img 元素在 DOM 中被完全重写或替换。这个寻找新的 src：

$(document).on('load', 'img[src*="foo.jpg"]', function(){
    //code here    
});

两者都没有成功。

编辑：解决了！这是最终工作的代码：

(function(){
    const daReviewItems = digitalData.cart.item.length;

    function whenRemoved(element, callback) {
        var interval = setInterval(function() {
            if (document.querySelectorAll(element).length < daReviewItems) {
                callback();
            }
        }, 100);
        return interval;
    }
    function whenExists(element, callback) {
        var interval = setInterval(function() {
            if (document.querySelectorAll(element).length) {
                clearInterval(interval);
                callback();
            }
        }, 100);
        return interval;
    }
    var loop_id = 0;
    whenRemoved('elem',function(){
        if (loop_id) return;
        loop_id = whenExists('img',function(){
            //SOME CODE HERE
            loop_id = 0;
        });
    });
})();

它被包装在一个匿名函数中以保持其全局范围。基本上，它会等待“elem”不存在，然后检查我要编辑的 img 是否存在。如果是这样，那么我还没有添加'elem'类的任何imgs，让函数在它们上运行。所以，在初始加载时，'elem' 不存在，因为我还没有添加那个类，所以代码会触发。然后，如果 imgs 被删除或重新加载，我的 'elem' 类将被删除，所以它会再次触发并再次等待 imgs。loop_id 检查迭代并防止代码无限循环。我必须感谢我认识的开发人员在这方面提供的帮助。他在这里没有用户，但他值得称赞。那谢谢啦！

标签： javascriptjquerycallbacklazy-loadingsetinterval