Jssor 滑块 - 图像抖动错误答案

【问题标题】：Jssor slider - image shake bugJssor 滑块 - 图像抖动错误
【发布时间】：2014-05-18 17:52:59
【问题描述】：

我使用 jssor 滑块，非常好的库，但我有时会遇到图像抖动、效果完成后或鼠标悬停时的问题。

这种抖动（或移动）仅在某些时候显示 - 并非针对所有图像。

当幻灯片小于图像时，我在演示页面中也看到了这一点。在 Firefox 中查看此演示，窗口大小为 333x600（宽度很重要，您可以通过 CTRL+SHIFT+M 设置窗口大小） http://www.jssor.com/demos/image-slider.html

并非所有宽度值都可以重现此错误，但重要的是幻灯片宽度小于图像文件。

【问题讨论】：

我看不到 333x600 的选项
有320x480, 360x640 ...
在此模式下只需通过鼠标调整窗口大小以设置为任何值
这个抖动（运动）只有1px-2px左右，但是是可见的
好的，让我看看。非常感谢！

标签： slider jssor

【解决方案1】：

将所有图像定义为延迟加载图像（例如）。打开jssor.slider.js，在第1515行找到如下代码，移到第1377行。

                    $JssorUtils$.$Each(_ImageElmts, function (imageElmt) {

                        if (!imageElmt.src) {
                            imageElmt.src = $JssorUtils$.$GetAttributeEx(imageElmt, "src2");
                            $JssorUtils$.$SetStyleDisplay(imageElmt, imageElmt["display-origin"]);
                        }
                    });

我现在明白了你的担心。

让它按您的意愿工作的最佳方法是自己手动设置图像大小。例如

<img src="url" style="position: absolute; top: ...px; left: ...px; width: ...px; height: ...px" />

【讨论】：

感谢您的回复，我找到了缺少淡出的解决方案。我使用过渡 { $Duration:2000, $Opacity:2, $Brother:{ $Duration:2000, $Opacity:2 }}。要修复显示您的补丁的图像不起作用，我在控制台中给出错误。 roborobo2.tym.sk/jssor/examples/…
这是一个丑陋的解决方案并且不起作用。我上传了非常大的第一张图片以更好地查看加载进度。 roborobo2.tym.sk/jssor/examples/…。您不会对延迟加载错误做出反应 - 重复加载以前加载的图像。
加载前图像大小未知。无论如何，您可以手动设置每个图像的大小。另外，配置您的服务器以启用图像的客户端缓存以防止图像重新加载。
有什么想法吗？有什么可以为你做的吗？
其实什么都没做。没有有效的解决方案。图像大小已设置，请参见第一张图像的源代码。在我自己的服务器上，我也有 Cache-Control:max-age=315360000，但是 jssor 插件会不断地重新加载图像，主要是在手动滑动到背面图像的情况下。理想情况下，我想在加载之前隐藏图像。如果 $EVT_LOAD_END 正常工作，我可以自己做。

【解决方案2】：

不要在缩略图中使用与主图像相同的图像文件。使用单独的较小版本。我遇到了同样的问题，并且解决了。

【讨论】：