Javascript 在滑块中延迟加载图像（纯JS）

我试图在JS中向我的滑块添加lazy loading images属性，并尝试按照T.J.Crowder在中给出的答案进行操作，但有些东西不起作用（控制台没有显示任何内容）。有没有提示如何解决这个问题并向滑块添加延迟加载

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

---

在javascript内部调用

prod.getAttribute（）

。但这里的问题是prod是页面中的元素数组，因为

getElementsByClassName

返回与类名匹配的元素数组。您需要将调用prod的代码包装在for循环中，以正确修改所有元素

我使用了一个不同的图像，只是为了显示图像确实加载了最终结果，但我不确定这是否是您想要的外观，因为它似乎附加了img，但随后继续保留背景图像。加载图像后，您可能希望删除背景图像样式，或者修改要添加的图像标记的样式，以获得所需的样式

var slideIndex=0；
设置超时（滑块，3000）；
var move_left=0；
函数setMoveLeft（）{
if（向左移动！=（document.getElementsByClassName（“part”）[0]。offsetWidth+4））{
move_left=document.getElementsByClassName（“part”）[0].offsetWidth+4；
}
}
setMoveLeft（）；
window.onresize=函数（事件）{
setMoveLeft（）；
};
var prod、imgsrc、img；
prod=document.getElementsByClassName（'part'）；
imgsrc=新数组（）；
对于（i=0；i=x.length）{
slideIndex=0
}
document.getElementsByClassName（“内容处理程序”）[0]。style.marginLeft=（-move_left*slideIndex）+“px”
设置超时（滑块，3000）；
}

部分{
溢出：隐藏；
颜色：#F5；
}
分区#img1{
背景图片：url(https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg);
背景位置：中心；
背景尺寸：封面；
}
部门#img2{
背景图片：url(https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg);
背景位置：中心；
背景尺寸：封面；
}
分区#img3{
背景图片：url(https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg);
背景位置：中心；
背景尺寸：封面；
}
分区#img4{
背景图片：url(https://blogs.mulesoft.com/wp-content/uploads/2012/03/hello-world.jpg);
背景位置：中心；
背景尺寸：封面；
}
分区滑块容器{
位置：相对位置；
高度：450px；
边缘顶部：50px；
}
分部内容{
宽度：500px；
位置：绝对位置；
左：0；
右：0；
左边距：自动；
右边距：自动；
}
div.content处理程序{
宽度：5000px；
-webkit过渡：所有0.5s易入易出；
-moz转换：所有0.5s的易入易出；
-o型过渡：所有0.5s缓进缓出；
过渡：所有0.5s缓进缓出；
}
分部{
宽度：500px；
文本对齐：居中；
填充：10px；
边框：1px凹槽；
背景色：#F5；
颜色：#292929；
显示：内联网格；
}
第h3部{
字号：2em；
边框：1px凹槽；
背景色：#F5；
颜色：#292929；
不透明度：0.9；
宽度：400px；
左边距：35px；
}
第p部{
字体大小：1.1米；
线高：25px；
填充：15px；
宽度：400px；
高度：250px；
边框：1px凹槽；
背景色：#F5；
颜色：#292929；
不透明度：0.9；
左边距：35px；
}

标题
正文

标题
正文

标题
正文

标题
正文

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

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