無限スクロールに jquery プラグインを使用しており、実行する必要があるクライアント側のスクリプトを除いて完全に機能しています。
私の無限スクロールスクリプトは次のとおりです。
<script type="text/javascript">
$('.infinite-container').waypoint('infinite', {
container: 'auto',
items: '.infinite-item',
more: '.infinite-more-link',
offset: 'bottom-in-view',
loadingClass: 'infinite-loading',
onBeforePageLoad: $.noop,
onAfterPageLoad: $.noop
});
</script>
ウェイポイントのウェブサイトが言っているのは、onAfterPageLoad:
新しいページ アイテムが読み込まれ、コンテナーに追加された後に実行する関数。
onAfterPageLoad:
私の主な問題は、Twitter と Facebook のボタンが読み込まれないことです。私が見ることができるのは「twitter」という言葉だけで、Facebookのボタンはまったく表示されません。しかし、最初のページでは問題なくロードされます。
また、スティッキー要素も機能していません。最初のページの読み込みでは機能しますが、無限スクロールのページの読み込みでは機能しません。
新しいページにあるスクリプトがまったく起動されていないようです。実際、更新されたページのソースコードを調べると(無限スクロール)、のいずれも表示されません。
どういうわけか、これらの 3 つのスクリプトを再度ロードする必要があります。
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1&appId=***********";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<script>
$(document).ready(function() {
$('.container').stickem();
});
</script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
私はjavascript/jqueryにかなり慣れていないので、どんなアドバイスも大歓迎です。ありがとう。