滾動到 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);