滚动到 Div 时 Javascript 加载更多

Question

当我点击加载更多链接时，它会加载更多结果我需要从当我滚动到 AJAXloaded Div 时点击链接时更改它

我的 HTML 代码

    <div id="AJAXloaded">
        <div class="loadmore">
            <ul class="pagination">
                <li class="active">
                    <a id="load-more">مشاهدة المزيد ...
                        <img id="lodingGif" src="{{Request::root()}}/public/upload/logo/loading.gif" height="25" width="25" style="display: none;">
                    </a>
                </li>
            </ul>
        </div>
    </div>

我的JS代码

  $(document).on("click","#load-more",function() {
     page=page+1;
     loadMoreData(page);
 });

Answer 1

这是IntersectionObserver API的完美用例

从文档：

Intersection Observer API 提供了一种异步观察目标元素与祖先元素或顶级文档视口的交集变化的方法。 [...] 需要交叉路口信息的原因有很多，例如：

• 实现“无限滚动”网站，在您滚动时加载和呈现越来越多的内容，这样用户就不必翻阅页面。

var options = {
  root: document.querySelector('#AJAXloaded'),
  rootMargin: '0px',
  threshold: 0,
};

var observer = new IntersectionObserver(callback, options);

function callback() {
  // element scrolled into viewport
}

浏览器支持相当好（IE 除外）。 如果您需要支持较旧的浏览器，可以使用几个 polyfill。 但是由于他们使用轮询并且在每种情况下都不起作用，我个人只会为那些浏览器保留按钮并为支持IntersectionObserver浏览器删除它。

var supportsIntersectionObserver = 'IntersectionObserver' in window;

if(supportsIntersectionObserver) { button.remove(); }

Answer 2

如何为 Blogger 博客添加无限滚动？ 如果您不关心细节而只想在您的博客上启用该功能，请单击下面的按钮并将代码添加到您的博客中。 在大多数情况下，无限滚动应该只适用于您的博客。 但是，如果您有自定义模板，则可能需要稍微调整代码。 （向下滚动到“常见问题”部分了解详细信息。如果单击此按钮没有任何反应，或者由于某种原因它不起作用，您可以手动添加此代码：

• 向您的博客添加 HTML/JavaScript 小工具。
• 将小工具的标题留空。
• 将以下代码粘贴为小工具的内容：

 (function($) { var loadingGif = 'https://lh3.googleusercontent.com/-FiCzyOK4Mew/T4aAj2uVJKI/AAAAAAAAPaY/x23tjGIH7ls/s32/ajax-loader.gif'; var olderPostsLink = ''; var loadMoreDiv = null; var postContainerSelector = 'div.blog-posts'; var loading = false; var win = $(window); var doc = $(document); // Took from jQuery to avoid permission denied error in IE. var rscript = /<script\\b[^<]*(?:(?!<\\/script>)<[^<]*)*<\\/script>/gi; function loadDisqusScript(domain) { $.getScript('http://' + domain + '.disqus.com/blogger_index.js'); } function loadMore() { if (loading) { return; } loading = true; if (!olderPostsLink) { loadMoreDiv.hide(); return; } loadMoreDiv.find('a').hide(); loadMoreDiv.find('img').show(); $.ajax(olderPostsLink, { 'dataType': 'html' }).done(function(html) { var newDom = $('<div></div>').append(html.replace(rscript, '')); var newLink = newDom.find('a.blog-pager-older-link'); var newPosts = newDom.find(postContainerSelector).children(); $(postContainerSelector).append(newPosts); // Loaded more posts successfully. Register this pageview with // Google Analytics. if (window._gaq) { window._gaq.push(['_trackPageview', olderPostsLink]); } // Render +1 buttons. if (window.gapi && window.gapi.plusone && window.gapi.plusone.go) { window.gapi.plusone.go(); } // Render Disqus comments. if (window.disqus_shortname) { loadDisqusScript(window.disqus_shortname); } // Render Facebook buttons. if (window.FB && window.FB.XFBML && window.FB.XFBML.parse) { window.FB.XFBML.parse(); } // Render Twitter widgets. if (window.twttr && window.twttr.widgets && window.twttr.widgets.load) { window.twttr.widgets.load(); } if (newLink) { olderPostsLink = newLink.attr('href'); } else { olderPostsLink = ''; loadMoreDiv.hide(); } loadMoreDiv.find('img').hide(); loadMoreDiv.find('a').show(); loading = false; }); } function getDocumentHeight() { return Math.max( win.height(), doc.height(), document.documentElement.clientHeight); } function handleScroll() { var height = getDocumentHeight(); var pos = win.scrollTop() + win.height(); if (height - pos < 150) { loadMore(); } } function init() { if (_WidgetManager._GetAllData().blog.pageType == 'item') { return; } olderPostsLink = $('a.blog-pager-older-link').attr('href'); if (!olderPostsLink) { return; } var link = $('<a href="javascript:;">Load more posts</a>'); link.click(loadMore); var img = $('<img src="' + loadingGif + '" style="display: none;">'); win.scroll(handleScroll); loadMoreDiv = $('<div style="text-align: center; font-size: 150%;"></div>'); loadMoreDiv.append(link); loadMoreDiv.append(img); loadMoreDiv.insertBefore($('#blog-pager')); $('#blog-pager').hide(); } $(document).ready(init); })(jQuery);