Question

我在3个独立的div中有3组图像，这些图像被硬编码到网页中。用户选择按钮一次只能查看一组。当每组中只有5个图像时，这是可以的，但现在我添加了更多，页面加载速度非常慢。这些图片是1200 x 900像素，因为我使用的是nivo-slider，可以进行尺寸调整有没有办法只加载点击的图片集？

<div class="slider-wrapper theme-default" id="wrapper1" >
    <div class="nivoSlider" id="c1" >
         <img src="images/Germany2008/GermanyTrip01.jpg" alt="" />
         <img src="images/Germany2008/GermanyTrip02.jpg" alt="" />
          <!--etc. -->                                         
    </div>
</div>
<div class="slider-wrapper theme-default" id="wrapper2" > 
    <div class="nivoSlider" id="c2">
         <img src="images/Germany2008/GermanyTrip01.jpg" alt="" />
         <img src="images/Germany2008/GermanyTrip02.jpg" alt="" />
          <!--etc. -->           
    </div>
</div>

谢谢。

Answer 1

我不清楚你想要什么，但我会尝试。

在正文的底部添加以下javascript：

var wrapperOneImages = ["path/to/image","path/to/image","path/to/image"];
var wrapperTwoImages = ["path/to/image","path/to/image","path/to/image"];
var amountOfWrappers = 2;
for (i=0; i < amountOfWrappers; i++) {
    var nivoSlider = document.createElement("div");
    nivoSlider.setAttribute("class", "nivoSlider");
    nivoSlider.setAttribute("id", "c" + toString(i+1));
    var wrapper = document.getElementById("wrapper" + toString(i+1));
    if (i == 0) {
        var whatWrapper = wrapperOneImages;
    } else if (i == 1) {
        var whatWrapper = wrapperTwoImages;
    }
    for (j=0; j < whatWrapper.length; j++) {
        var img = document.createElement("img");
        var img.setAttribute("src", whatWrapper[j]);
        nivoSlider.appendChild(img);
    }
    wrapper.appendChild(nivoSlider);
}

并用以下内容替换您提供的所有html：

<div class="slider-wrapper theme-default" id="wrapper1" ></div>
<div class="slider-wrapper theme-default" id="wrapper2" ></div>

我没有测试过，但它应该有用。

在3个包装div中有图像，但一次只需要查看一个div。加载速度太慢

1 个答案: