jQuery无限滚动缺少css背景加载量页面答案

【问题标题】：jQuery infinite scroll missing css background load amount pagesjQuery无限滚动缺少css背景加载量页面
【发布时间】：2013-07-31 17:18:26
【问题描述】：

我正在使用最新版本的无限滚动（paulirish）。一切正常，但是有一个很奇怪的问题，其实我不知道这是不是一个问题。

好吧，让我们想象一下：您有一个论坛，并且您在大约 20 页的线程中使用无限滚动。您可以顺利加载大约 8 页。但在那之后，就无法为第 9 页加载完整的 css（css 中的背景图片）了。

你可以在这里看到截图：http://photo.luyencong.net/images/infinitesc.png
你以前遇到过这个问题或任何类似的问题吗？请给我一些建议，非常感谢。

【问题讨论】：

标签： javascript jquery infinite-scroll

【解决方案1】：

让我们将您的大背景分成三个较小的部分。

HTML

<div id="start_part">...</div>
<div id="content_part">
    <div class="wrapper">...</div>
</div>
<div id="end_part">...</div>

CSS

#start_part { 
    background: url("top-part.jpg") 0 0 no-repeat;
}
#content_part {
    background: url("center-part.jpg") no-repeat fixed center top transparent;
    margin: 0 auto;
}
#content_part .wrapper1 {
    background: url("top-part.jpg") 1px 0 no-repeat;
    width: 100%;
}
#content_part .wrapper2 {
    background: url("bottom-part.jpg") 1px 0 no-repeat;
    width: 100%;
}
#end_part {
    background: url("top-part.jpg") 0 0 no-repeat;
}

希望对你有帮助。

【讨论】：

这个真的很有帮助。

【解决方案2】：

当您向下滚动时，您正在滚动背景图像。修复背景图片：

background-image:url('yourbackground.png');
background-repeat:no-repeat;
background-attachment:fixed;

http://www.w3schools.com/css/tryit.asp?filename=trycss_background-attachment

【讨论】：