javascript - 在 HTML 与 Javascript 中创建元素

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

从那里我将创建一个空的 <div id="carousel"></div>在 HTML 文件中，通过 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 可以实现相同的结果 - 但我更喜欢第二个实现的灵 active 。我可以逃脱惩罚，还是这就是错误的？

<小时/>

编辑:我按照 Leeish 的建议创建了一个像这样的 div，

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

从那里，我动态切换img“SRC”，而不是每次重绘“IMG”本身。干杯

Answer 1

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

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

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