jQuery Smoothdivscroll ajax 间歇性问题

Question

我在使用 smoothdivscroll 插件时遇到了间歇性问题。我注意到，有时当我加载页面时，只会显示第一张图片并且它只是静止的。有时（几次刷新后）所有图像都会加载并开始滚动。我检查了来自 ajaxContent.php 的响应，片段响应似乎是正确的。

我目前正在使用以下示例代码：

$("#div").smoothDivScroll({
    autoScrollingMode: "always", 
    autoScrollingDirection: "endlessloopleft", 
    autoScrollingStep: 1, 
    autoScrollingInterval: 15, 
    ajaxContentURL: "ajaxContent.php"
});

ajaxContent.php 的作用是返回带有图像源的 div 的页面片段，类似于 http://www.smoothdivscroll.com/lab.html 中的示例，其中启用了“用演示 html 内容替换内容”。图片 src 实际上是外部站点图片的完整路径，类似于

<img src="http://example.com/image.jpg">.

返回的片段示例：

<div class="contentBox">
<img src="http://example.com/image.jpg">
</div>
<div class="contentBox">
<img src="http://example2.com/image2.jpg">
</div>

然后我也尝试了似乎运行良好的演示示例，是否会从外部站点缓慢加载图像导致插件无法正常工作？

Answer 1

是的，这可能是由于图像加载缓慢和/或带有“contentBox”类的 div 的 CSS 问题导致插件难以计算所有元素的总宽度可滚动区域。

当 Smooth Div Scroll 启动时，它会检查是否指定了 ajaxContentURL。如果是这样，它会从该 URL 加载 HTML 内容，并在重新计算可滚动区域的宽度之后立即加载。当它重新计算可滚动区域的宽度时，它会查看直接子元素的宽度，在您的情况下，div 的类为“contentBox”。如果这些 div 没有在 CSS 中指定固定宽度并且部分/所有图像尚未完全加载 Smooth Div Scroll 将错误地计算所有元素的总宽度。

如果所有图像的宽度相同，您可以尝试为“contentBox”-div 设置固定宽度。您可以尝试的另一件事是暂时剥离包装器 div 并仅加载带有图像标签的 HTML。