0
私はJSのスライダーにレイジーローディングイメージプロパティを追加しようとしています。私はT.J.からの答えに従おうとしています。 Crowder in Lazy loading images howしかし、何かが動作していない（コンソールに何も表示されません）。どのように問題を解決し、スライダーにレイジーローディングを追加するかのヒント？スライダー（純粋なJS）でレイジーローディングイメージ
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：あなたはprod.getAttribute()を呼び出すJavaScriptの内部
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;
}