How to get src of dynamic loaded images

Question

Accordingly to the documentation document.images should give me a list of images being loaded. However in the following page:

https://developer.mozilla.org/en-US/docs/Web/API/document.images

if you run on the console the command document.images it will return an empty array [], run document.images.length and it will return 0.

I ran into this by looking on how Adobe is doing it in PDP: https://www.adobetag.com/d1/digitalpulsedebugger/live/DPD.js to get their tracking pixel which I am trying to get as well.

Any help would be greatly appreciated.

Answer 1

There are no images on the Mozilla page, that's why it's 0. The "images" you saw are loaded in CSS, while document.images will only return a list of "images in the current HTML document."

If you try $("img").length on that page, you will see that it is 0.

---

Quoting the original text from the W3C Recommentation:

A collection of all the IMG elements in a document. The behavior is limited to IMG elements for backwards compatibility.

Answer 2

The page has no images (img tags).

The images you see come from the sprite sheet: https://developer.cdn.mozilla.net/media/redesign/img/logo_sprite.svg

This is set as background image & clipped, as required.