【发布时间】:2012-06-29 10:51:51
【问题描述】:
我正在使用 Jquery 为图像创建自己的轮播幻灯片。 目前我有一个 div 充当具有溢出的视口:不可见;在里面我有一个非常长的 div,所有不同的图像一个挨着一个。
这意味着 div 可能有几千个像素宽。我想知道如果这可能是个问题怎么办。
我想单独加载所有图像并仅在需要时移动它们,而不是移动整组幻灯片。
您认为实现高性能和轻量化的最佳解决方案是什么?
谢谢
【问题讨论】:
我正在使用 Jquery 为图像创建自己的轮播幻灯片。 目前我有一个 div 充当具有溢出的视口:不可见;在里面我有一个非常长的 div,所有不同的图像一个挨着一个。
这意味着 div 可能有几千个像素宽。我想知道如果这可能是个问题怎么办。
我想单独加载所有图像并仅在需要时移动它们,而不是移动整组幻灯片。
您认为实现高性能和轻量化的最佳解决方案是什么?
谢谢
【问题讨论】:
在某些设备上滚动长位图或图层可能会导致视觉撕裂效果,如果我要自己开始这样的项目 - 完成起来更棘手 - 但使用单独控制的 div 要好得多。
根据您想要实现的目标,您通常只需使用您独立控制的 两个 div(可能是三个)。您需要做的就是继续将下一张图片加载到“隐藏”在视口之外的 div 中,然后在滑出当前可见的图片时将其滑入到位。
从优化的角度来看,上述方法是一种更好的方法,并且可以灵活地实现各种过渡效果(即幻灯片或淡入淡出等)。我还建议您将图像列表存储为 JS Array (并在将其插入 HTML Dom 之前预加载每个图像)或 HTML/LI 列表在图像上(浏览器已经预加载)。
一个很好的例子如下:
【讨论】: