当延迟加载时，如何使用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    
});

均未成功。

Answer 1

我不明白，什么决定了图像的显示？

const imgList = document.querySelectorAll('img')

let siz = 3;
imgList.forEach(img=>
  {
  img.onload=_=> console.log(`${img.id} --> loaded`)
  img.src = `https://picsum.photos/${siz++}00/200`
  })

<img id="img1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg=="> 
<img id="img2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg=="> 
<img id="img3" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8z/C/HgAGgwJ/lK3Q6wAAAABJRU5ErkJggg=="> 

不过这里是用于加载一些图像的示例代码