Geek Answers Handbook

Load more features in Javascript

EDIT: This question was initially too general, I think. So I really need a very good guide on how to implement the Load More function on Safari for the iPhone , like the Twitter site (mobile.twitter.com) does. Just the wordpress plugin won't help. But if the plugin is well explained, as if it were wptouch, then at home (which also has this feature).

I know that it doesn’t really matter if it is displayed on a mobile device, but I emphasize that if such a function is well explained, then I will need to know how to configure it for me.

I use the javascript function to load records coming from the database dynamically, so that the content opens on the same page (for example, using twitter (tweets) and facebook (news feed)).

Php / html version (which opens the page in a new tab)

echo '<a href="http://'. $_SERVER['HTTP_HOST'] .'/'.$domain_page.'?form='.$form_id.'&page='.($page+1).'">Load more entries&rsaquo; </a>';

Javascript / ajax version:

<div id="call_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>" class="ajax-load-more">

                <img id="spinner<?php echo md5($_SERVER['REQUEST_URI']); ?>" class="spin" src="<?php bloginfo('template_directory'); ?>/images/main-ajax-loader.gif" style="display:none" alt="" /> 

                <a class="ajax" href="javascript:$ajax_hv('#spinner<?php echo md5($_SERVER['REQUEST_URI']); ?>').fadeIn(200); 

                $ajax_hv('#ajaxentries_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>').load('form='<? echo $form_id; ?>&page=<?php echo $page+1;?>', {}, 

                function(){ $ajax_hv('#call_hv<?php echo md5($_SERVER['REQUEST_URI']); ?>').fadeOut();})">Load more entries... 

                </a>
+5
source share
2 answers

The main idea is to listen to scroll events and implement server-side swapping.

An event scrollis fired whenever a document or contained HTML element scrolls. I will use this sketch for reference, remembering the following things:

, 800 , - 2500 . AJAX - 100 ( 2400 ).

alt text

2 :

  1. / .
  2. .

MooTools, . jQuery - , .

var maxPage = 1;
var threshold = 100;

, , . . (100px), AJAX-, . ( ), maxPage.

, , - AJAX-, . , , .

var isLoading = false;

window.addEvent('scroll', function() {
    // the height of the entire content (including overflow)
    var contentHeight = window.getScrollSize().y;
    // current scroll is height of content that above the viewport plus
    // height of the viewport.
    var contentScrolled = window.getScroll().y + window.getSize().y;
    var distanceToBottom = contentHeight - contentScrolled;
    var closeToBottomOfPage = distanceToBottom < threshold;
    var shouldLoadMoreContent = !isLoading && closeToBottomOfPage;

    if(shouldLoadMoreContent) {
        // create an ajax request
        var request = new Request({
            url: 'http://www.example.com/more',
            onSuccess: function(responseText) {
                $('page').append(responseText);
                maxPage++;
            },
            onRequest: function() {
                isLoading = true;
            },
            onComplete: function() {
                isLoading = false;
            }
        });
        // fire off ajax request with the page # as a querystring param
        request.send({page: maxPage});
    }
}
+8

. jQuery Wordpress:

http://www.infinite-scroll.com/

+2

More articles:


All Articles