0

i'm trying to add lazy-loading images property to my slider in JS and i'm trying to follow the answer from T.J. Crowder in Lazy loading images how, but something it's not working (the console shows nothing). any hint how to solve the problem and add lazy-loading to the slider?

JS script: 

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);
}

HTML code:

<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>

CSS:

section {
    overflow: hidden;
    color: #F5F5F5; 
}

div #img1 {
    background-image: url(../img/mockup-863469_1920.jpg);
    background-position: center;
    background-size: cover;
}


div #img2 {
    background-image: url(../img/board-453758_1920.jpg);
    background-position: center;
    background-size: cover;
}

div #img3 {
    background-image: url(../img/digital-marketing-1433427_1920.jpg);
    background-position: center;
    background-size: cover;
}

div #img4 {
    background-image: url(../img/action-2277292_1920.jpg);
    background-position: center;
    background-size: cover;
}

div .slider-container{
    position: relative;
    height: 450px;
    margin-top: 50px;
}

div .content{
    width: 500px;
    position: absolute;
    left:0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
}

div .content-handler{
    width: 5000px;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;    
    transition: all 0.5s ease-in-out;
}

div .part {
    width: 500px;
    text-align: center;
    padding: 10px;  
    border: 1px groove;
    background-color: #F5F5F5;
    color: #292929;
    display: inline-grid;
}

div .part h3 {
    font-size: 2em;
    border: 1px groove;
    background-color: #F5F5F5;
    color: #292929;
    opacity: 0.9;
    width: 400px;
    margin-left: 35px;
}

div .part p {
    font-size: 1.1em;
    line-height: 25px;
    padding: 15px;
    width: 400px;
    height: 250px;
    border: 1px groove;
    background-color: #F5F5F5;
    color: #292929;
    opacity: 0.9;
    margin-left: 35px;
}
ric
  • 627
  • 1
  • 12
  • 23

1 Answers1

1

Inside of your javascript you call prod.getAttribute(). The problem here though is that prod is an array of elements from the page as getElementsByClassName returns an array of elements matching the class name. You need to wrap the code that calls prod inside of a for loop to correctly modify all of the elements.

I have used a different image just to show that the images do load for the end result, but I'm not sure that this is the look you are going for as it appears to append the img, but then continue to have the background image stay around. You may wish to either remove the background-image styling once the image is loaded, or modify the styling of the image tag you are appending to get the styling you want.

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 = new Array();
for (i = 0; i < prod.length; i++) {
  imgsrc[i] = prod[i].getAttribute('data-src');
  if (imgsrc) {
    img = document.createElement('img');
    img.src = imgsrc[i];
    prod[i].appendChild(img);
    prod[i].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);
}
section {
  overflow: hidden;
  color: #F5F5F5;
}

div #img1 {
  background-image: url(https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg);
  background-position: center;
  background-size: cover;
}

div #img2 {
  background-image: url(https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg);
  background-position: center;
  background-size: cover;
}

div #img3 {
  background-image: url(https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg);
  background-position: center;
  background-size: cover;
}

div #img4 {
  background-image: url(https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg);
  background-position: center;
  background-size: cover;
}

div .slider-container {
  position: relative;
  height: 450px;
  margin-top: 50px;
}

div .content {
  width: 500px;
  position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

div .content-handler {
  width: 5000px;
  -webkit-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

div .part {
  width: 500px;
  text-align: center;
  padding: 10px;
  border: 1px groove;
  background-color: #F5F5F5;
  color: #292929;
  display: inline-grid;
}

div .part h3 {
  font-size: 2em;
  border: 1px groove;
  background-color: #F5F5F5;
  color: #292929;
  opacity: 0.9;
  width: 400px;
  margin-left: 35px;
}

div .part p {
  font-size: 1.1em;
  line-height: 25px;
  padding: 15px;
  width: 400px;
  height: 250px;
  border: 1px groove;
  background-color: #F5F5F5;
  color: #292929;
  opacity: 0.9;
  margin-left: 35px;
}
<div class="row slider-container">
  <section class="content">
    <div class="content-handler">
      <div id="img1" data-src="https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg" class="part">
        <h3>title</h3>
        <p>text</p>
      </div>
      <div id="img2" data-src="https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg" class="part">
        <h3>title</h3>
        <p>text</p>
      </div>
      <div id="img3" data-src="https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg" class="part">
        <h3>title</h3>
        <p>text</p>
      </div>
      <div id="img4" data-src="https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg" class="part">
        <h3>title</h3>
        <p>text</p>
      </div>
    </div>
  </section>
</div>
Joffutt4
  • 1,418
  • 14
  • 15