Javascript Load More when Scroll To Div

Question

When I click I on load more link it load more results I need to change it from when I click to link when I Scroll To AJAXloaded Div

My Html Code

    <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>

My JS Code

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

Answer 1

How to add infinite scrolling to Blogger blogs? If you don’t care about the details and you only want to enable the feature on your blog, click on the button below and add the code to your blog. Infinite scrolling should just work on your blog, in most cases. If you have a custom template, though, you may need to tweak the code a little. (Scroll down to “Frequently asked question” section for details. If clicking on this button does nothing, or it doesn’t work for some reason, you can add this code manually:

• Add a HTML/JavaScript gadget to your blog.
• Leave the gadget’s title empty.
• Paste the following code as the gadget’s content:

(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);

Answer 2

This is a perfect use case for the IntersectionObserver API

From the docs:

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport. [...] Intersection information is needed for many reasons, such as:

• Implementing "infinite scrolling" web sites, where more and more content is loaded and rendered as you scroll, so that the user doesn't have to flip through pages.

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

var observer = new IntersectionObserver(callback, options);

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

Browser support is quite good (except for IE). If you need to support older browsers there are a couple of polyfills available. But since they use polling and don't work in every situation I would personally just leave the button for those browsers and remove it for browsers supporting IntersectionObserver.

var supportsIntersectionObserver = 'IntersectionObserver' in window;

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