3

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?

2
  • 1
    Have you tested this? Aug 21, 2021 at 16:51
  • 1
    @MikeCiffone Not yet but it's working very good... I just want too know google can handle it or no.
    – mmdeshoon
    Aug 22, 2021 at 4:56

1 Answer 1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.