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?