Is it bad for SEO to load images with javascript?

Question

I try this to load images when they are on screen:

JS:

var elementvector3 = document.querySelector('#vector3');
var positionvector3 = elementvector3.getBoundingClientRect();
if (positionvector3.top >= 0 && positionvector3.bottom <= window.innerHeight) {
    document.getElementById("vector3").innerHTML = "<img src='vectors/third-vector.jpg' alt='' width='100%' id='vectorload3'> <span class='img-not-loaded'> Loading... </span>";
    var image3 = document.getElementById("vectorload3");
    if (image3.complete && image3.naturalHeight !== 0) {
        document.getElementById("vector3").innerHTML = "<img src='vectors/third-vector.jpg' alt='' width='100%'>";
    }
    document.getElementById("vector3").style.transform = "rotate(5deg)";
}

HTML:

<div class="col-lg-5 col-md-5 col-sm-5 col-5 div-img-main" id="vector3">
<span class="img-not-loaded"> Loading... </span>
</div>

If I do this, will it cause Google to be unable to index my images or other problems?

Answer 1

When it comes to the actual crawling and indexing process, I'm not worried about this. Google can render JS (this is a good example of when), and they cache images very aggressively.

This will not prevent your images from being indexed. It will contribute to Cumulative Layout Shift.