一次加载一个幻灯片

Question

我使用了Wordpress和一个名为旋风滑块的幻灯片插件。我将网站构建为仅一页，因此所有网页和幻灯片都与display: none和visibility: hidden叠加在一起，然后点击z-index，visibility: visible和{{ 1}}。

该网站显然加载非常缓慢，因为有很多幻灯片显示平均大小为100kb的图片，它是一个摄影师网站，他不想再优化图像了。

如果父作品从display: block转到jQuery或从display: none转到可见，我怎样才能使用display: block仅在每张幻灯片上加载图片。甚至使用visibility: hidden。

最好的选择是，如果您点击另一个类别，它会开始加载该幻灯片或部分幻灯片，然后停止加载您刚刚播放的幻灯片。

一些布局代码：

z-index

Answer 1

一种选择是使用JQuery LazyLoad plugin。

另一种更实际的方法是：

1. 首次加载时，为所有图像创建标记。对于加载的图像提供src属性，对于以后加载的图像，提供不同属性的src。
2. 将事件绑定到查看图像（滚动\点击）
3. 当事件触发时，找到下一个图像，获取备用src属性并将其插入src属性。