javascript - 在 slider 中延迟加载图像(纯 JS)

Question

我正在尝试将延迟加载图像属性添加到我在 JS 中的 slider ，并且我正在尝试遵循 T.J. 的回答。克劳德 Lazy loading images how ，但有些东西不起作用(控制台什么也没显示)。任何提示如何解决问题并向 slider 添加延迟加载？

JS 脚本:

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代码:

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

Answer 1

在您的 javascript 中调用 prod.getAttribute()。这里的问题是 prod 是页面中的元素数组，因为 getElementsByClassName 返回与类名匹配的元素数组。您需要将调用 prod 的代码包装在 for 循环内，以正确修改所有元素。

我使用了不同的图像只是为了表明图像确实加载了最终结果，但我不确定这是你想要的外观，因为它似乎附加了 img，但随后继续拥有背景图像留在周围。您可能希望在加载图像后删除背景图像样式，或者修改要附加的图像标签的样式以获得所需的样式。

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>