Question

我想这个问题可能已经被问过了。我在JavaScript中构建了一个照片滑块，而我的图像主要是高质量的照片，我只想在显示它们时加载照片。

<div class="wrap-button">
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

<div class="grid fade">
  <div class="grid-sizer"></div>
  <div class="grid-item grid-item-portrait"><img src="./photos/au1/IMG_0267.jpg" alt="arbre jungle"></div>
  <div class="grid-item grid-item-landscape"><img src="./photos/au1/IMG_0726.jpg" alt="plage heaven on earth"></div>
  <div class="grid-item grid-item-landscape"><img src="./photos/au1/IMG_0763.jpg" alt="route jusque l'horizon"></div>
  <div class="grid-item grid-item-portrait"><img src="./photos/au1/IMG_9969.jpg" alt="arbre géant dans la jungle"></div>
  <div class="grid-item grid-item-landscape"><img src="./photos/au1/IMG_0847.jpg" alt="vache morte sur la route désertique"></div>
  <div class="grid-item grid-item-landscape"><img src="./photos/au1/IMG_9582.jpg" alt="architecture dans un parc sydney"></div>
</div>

我在外部文件中使用JavaScript函数来显示或隐藏幻灯片。图像由mansonry.js和外部CSS文件组织。

if (n > slides.length) {
    slideIndex = 1
}

if (n < 1) {
    slideIndex = slides.length
}

for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
}

slides[slideIndex-1].style.display = "block";
$grid.imagesLoaded().progress(function() {$grid.masonry(masonryOptions)});

JavaScript在首次显示之前不加载图像

0 个答案: