javascript - 在HTML vs Javascript中创建元素

javascript - 在HTML vs Javascript中创建元素,第1张

目的 - 图片库。

与在“图库”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'。干杯

最佳答案:

1 个答案:

答案 0 :(得分:1)

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

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

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

本文经用户投稿或网站收集转载,如有侵权请联系本站。

发表评论

0条回复