I need help making image loading better.

Concerning to userscript Newspaper.

Since document is processed while is "on load" (aka "on the fly"), I want to replace all attributes of src to src-data while program processes the document.

I've attempted to do so by adding to function renderFeed the following code which doesn't work for all images, or is it? (I might need to check again)

  for (const image of newDocument.querySelectorAll('img')) {
    //source = image.src;
    //image.removeAttribute('src');
    //image.setAttribute('src-data', source);
    image.setAttribute('src-data', image.src);
    image.removeAttribute('src');
  }

Yet, below the execution of code document.replaceChild(insertDocument,removeDocument); I've added this code:

  for (const image of document.querySelectorAll('img')) {
    image.addEventListener('mouseover', loadImage(image))
    image.onmouseover = () => {
      image.removeEventListener('mouseover',loadImage(image))
    }
  }

Which causes the infinite loop if the line of function loadImage is not commented out.

function loadImage(image) {
  console.log('onmouseover')
  source = image.getAttribute('src-data');
  image.removeAttribute('src-data');
  image.src = source;
  //image.removeEventListener('mouseover',loadImage(image)) // This line causes infinite loop.
}

Note that I use mouseover event so it would be easier to test, though I want the event to trigger when an image element is inside or close to viewport.

P.S.
"Provident Image Load" (PIL) is a better name, eh?
Much better than the stupid phrase "Lazy (so called) Load".