0

我正在使用 Paul Irish 的 Infinite Scroll jQuery 插件，我注意到每次我在页面上加载更多内容时，它都会将以下 HTML 标记作为加载图形附加到 DOM 中：

<div id="infscr-loading" style="display: none; width: 100%;">
    <img alt="Loading..." src="loading.gif" />
    <div></div>
</div>

如果您仔细观察加载图形从 DOM 中取出，然后在加载新内容后重新插入，则图形实际上是从页面左侧动画到中心。如何消除这种可能无意的“动画”？我不太确定这实际上是预期的行为，而是我认为这是上述标记与 DOM 分离并重新插入的结果......不过我可能是错的。

有没有办法确保加载图形始终出现在准确的中心并且没有“动画”？

这是脚本的链接：https ://github.com/paulirish/infinite-scroll/blob/master/jquery.infinitescroll.js

我没有看到任何类型的 CSS 或 JS 产生这种效果。

4

3 回答 3

2

我已通过 CSS 将加载图像居中：

#infscr-loading{
    margin-left:auto;
    margin-right:auto;
    text-align:center;
}
#infscr-loading div{
    margin-left:auto;
    margin-right:auto;
    width:360px;
}
于 2014-06-11T13:56:56.650 回答
1

你可以删除它

('#infscr-loading').remove();

于 2014-11-09T01:30:20.597 回答
0

这已经通过无限滚动 v2.1.0 进行了测试。

居中加载指示器

在您的 CSS 中，根据需要设置样式#infscr-loading。使动画和文本居中：

#infscr-loading {
    text-align: center;
}

您还可以定义一个完全自定义的加载指示器（idinfscr-loading不是必需的：

$('#content').infinitescroll({
    loading: {
        msg: $('<div style="text-align: center">Loading…&lt;/div>')
    }
});

禁用动画

$('#content').infinitescroll({
    loading: {
        speed: 0 // default: 'fast'
    }
});
于 2015-03-06T01:06:22.493 回答