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? Commented 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
    Commented 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 you have read our privacy policy.

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