Question

目的 - 图片库。

与在“图库”div中创建每个图库图像相反，如下所示：

<div id="html_collection">
  <img src="picture_1">
  <img src="picture_2">
  <img src="picture_3">
</div>

我将它们存储在javascript数组对象中 - 为简单起见，如下所示：

var js_collection = [
    {
      'gallery' : 'picture_1.jpg',
    },
    {
      'gallery' : 'picture_2.jpg',
    },
    {
      'gallery' : 'picture_3.jpg'
    }

从那里我将在HTML文件中创建一个空的<div id="carousel"></div>，并通过JS动态地将每个“图库”图像附加到其中，方法是单击“下一步”和“上一页”按钮。 这些按钮将在js_collection数组中循环。

例如：

function showCarousel(x) {
    var slide     = document.createElement('img')
    slide.src     = js_collection[x].gallery
    var output    = carousel.appendChild(slide)
}

关注 - 我想重新绘制img节点并在每次我们点击下一个或上一个时从JS集合中获取当前的img ..可能在某种程度上是脏的。我知道通过在第一个'html_collection'选项中显示和隐藏imgs可以实现相同的结果 - 但我更喜欢第二个实现的灵活性。我可以逃脱它，还是这是错的？

编辑：我选择了Leeish的建议并创建了一个像这样的div，

<div id='carousel'>
    <img id='carousel_slide' src='nameOfFirstSlideHere.jpg'>
</div>

从那时起，我动态地切换了img'SRC'，而不是每次都重绘'IMG'。干杯

Answer 1

我对您的脚本方法的担忧是，在等待下一个图像被检索时，用户可能会在每次单击下一个/上一个按钮时遇到明显的延迟，至少在您的脚本当前已写入时。另一方面，如果图像数量很大，则在等待加载整组图像时，HTML版本会有明显的前期延迟。

我认为最好的解决方案是预先加载至少足够的图像，以确保当用户点击按钮时，下一个或上一个图像（至少通常）已经加载，所以唯一的延迟是微小的追加内容。如果您的图像很小，您可以考虑使用CSS精灵一次加载多个图像并减少HTTP请求的数量，尽管这需要更多的编码。

另一个选项，更简单的代码，但不会减少图像请求的数量，将使您的showCarousel方法创建一个图像对象，加载src，并附加到轮播的图像x + 1，但最初隐藏图像x + 1并显示图像x。这样，假设用户花了几秒钟查看每个图像，用户应该立即看到图像x，而x + 1准备就绪，以防万一用户要求它。

在HTML vs Javascript中创建元素

1 个答案: