Currently, I am attempting to incorporate lazy-loading images property into my slider using JS. I came across a solution from T.J. Crowder on Lazy loading images how. However, I seem to be facing an issue as nothing is showing up in the console. Could someone provide me with some guidance on how I can troubleshoot and successfully implement lazy-loading for the slider?
Below is the JS script for reference:
var slideIndex = 0;
setTimeout(slider, 3000);
var move_left = 0;
function setMoveLeft(){
if (move_left != (document.getElementsByClassName("part")[0].offsetWidth + 4)) {
move_left = document.getElementsByClassName("part")[0].offsetWidth + 4;
}
}
setMoveLeft();
window.onresize = function(event) {
setMoveLeft();
};
var prod, imgsrc, img;
prod = document.getElementsByClassName('part');
imgsrc = prod.getAttribute('data-src');
if (imgsrc) {
img = document.createElement('img');
img.src = imgsrc;
prod.appendChild(img);
prod.removeAttribute('data-src');
}
function slider() {
var i;
var x = document.getElementsByClassName("part");
for (i = 0; i < x.length; i++) {
}
slideIndex++;
if (slideIndex >= x.length) {
slideIndex = 0
}
document.getElementsByClassName("content-handler")[0].style.marginLeft = (-move_left*slideIndex)+"px"
setTimeout(slider, 3000);
}
Here is the HTML code snippet:
<div class="row slider-container">
<section class="content">
<div class="content-handler">
<div id="img1" data-src="img/mockup-863469_1920.jpg" class="part">
<h3>title</h3>
<p>text</p>
</div>
<div id="img2" data-src="img/board-453758_1920.jpg" class="part">
<h3>title</h3>
<p>text</p>
</div>
<div id="img3" data-src="img/digital-marketing-1433427_1920.jpg" class="part">
<h3>title</h3>
<p>text</p>
</div>
<div id="img4" data-src="img/action-2277292_1920.jpg" class="part">
<h3>title</h3>
<p>text</p>
</div>
</div>
</section>
</div>
Lastly, here is the styling provided by CSS:
/*CSS STYLES OMITTED FOR BREVITY*/