Javascript 画廊表演
我正在创建具有拖动功能的图片库（就像在 iPhone 上一样）。 它从 html div 获取数据（可能超过 15 个图像）：
<div class="mySlideshow">
<img src="img1.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
...
<img src="img15.jpg"/>
</div>
现在我看到两种创建它的方法（使用拖动进行过渡）：
- 创建 15 个带有背景图像的 div，并将它们全部显示为一大条。
- 创建 3 个 div 容器并在转换完成后更改其背景图像属性和位置。
创建此类图库的最佳方法是什么？
I'm creating image gallery with drag functionality (like on iPhone).
It gets data from html div (more than 15 images possible):
<div class="mySlideshow">
<img src="img1.jpg"/>
<img src="img2.jpg"/>
<img src="img3.jpg"/>
...
<img src="img15.jpg"/>
</div>
Now I see two ways how create it (transition using drag):
-Create 15 divs with background-image and show all them as one big strip.
-Create 3 div-containers and change their background-image property and position after transition complete.
What is the best way to create this kind of gallery?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
如果您担心性能，您可以预加载接下来的几个“隐藏”图像，同时在页面加载时不加载所有图像，例如 这个。
但是，您的问题似乎指向您认为上述两种方法中哪一种最好。我认为第一个会更好，但我不知道为什么你会在页面上使用背景图像而不是静态图像？除非我误解了您如何使用“背景图像”一词。将所有图像与一个 div 放在一行并滚动浏览它们可能会更流畅。从语义上讲，您可以使用列表而不是 div。
If you're worried about performance you could preload the next couple of "hidden" images whilst not loading all images when the page loads, like this.
However, your question seemed to be pointing at which of the two methods above you think would be best. I think the first would be better but I don't know why you'd use background-images rather than static images on the page? Unless I misunderstood how you were using the term "background-image". It'd probably be smoother to have all the images on a line with one div and scroll through them. Semantically, you could use a list rather than a div.
如果您希望以更多代码为代价来最小化带宽使用，请使用第二个。如果您不介意带宽，请使用第一个，但由于您提到的带宽超过 15 个，因此这可能不是最佳选择。
Use the second one if you want minimise the bandwidth usage at the cost of more code. Use the first one if you don't mind the bandwidth but since you mentioned more than 15, this may not be optimal.
第一种方法（加载所有图像）可能有助于防止重新绘制回流，但拖动过渡的代码对性能的影响更大。看看 jcarousellite 上的代码 - 它对我来说一直工作得很快。
The first method (loading all the images) may help prevent repaints an reflows, but the code for the drag transition will affect performance much more. take a look at the code on jcarousellite - it has always worked fast for me.