Using Tumblr infinite scrolling with another script

Question

I am using cody sherman's javascript code here: http://codysherman.com/tools/infinite-scrolling/code

I am also using a simple jquery script to dynamically change the background-images of the divs that hold the tumblr posts.

The jquery code works fine but I need a way to call the function again when the infinite scrolling script updates with new posts. A way of them talking to each other I guess.

You can see the page here: http://hypergeography.tumblr.com/ (It isn't using the infinite scrolling yet. but it does have the script that changes the background images.)

Any help would be appreciated.

Answer 1

If you feel safe enough, you could definitely get into that code (it's not long at all) and add some logic to the onreadystatechange section. This event is fired once the Ajax call is complete. If you hook into it, you could easily add something to talk to your code.

Another way is to hijack XMLHttpRequest, so that once its send() method is called, you attach your own event listener that monitors that request for the 'load' event. Once the request is done, you can call your custom functions. This could be done like this:

XMLHttpRequest.prototype.originalSend=XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send=function(s){
    this.addEventListener('load',function(){
        //CALL YOUR CODE HERE
    },false);
    this.originalSend(s);
}

Or instead, you could hijack the onreadystatechange function to add some of your own logic:

XMLHttpRequest.prototype.originalSend=XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send=function(s){
    if(this.onreadystatechange){
        var oldORSC=this.onreadystatechange;    
    }
    this.onreadystatechange=function(){
        if (this.readyState==4 && this.status==200){ //a successful request
                //CALL YOUR CODE HERE
        }
        if(oldORSC){
            oldORSC();
        }
    }
    this.originalSend(s);
}

Of course, if you wanted to support IE, you would have to do similar things withe the ActiveXObject that they use for AJAX. But I don't use it so I can't give you any examples.

EDIT: this assumes your page is making calls only for this purpose. If you have other AJAX calls, you will need to add logic to determine which call is being used. For this, you could hook into the open() method and inspect the URL or parameters or whatever specific information will help you determine where the call is going, and then modify the request accordingly.

ALSO: make sure that these hijacks are called FIRST, before any of the other javascript.