How to apply my script to images as they load via infinite scroll?

Question

For my blog, http://seans.ws, I wrote a script that looks at the size of an image, and if it is wider than the default container size it figures out how much negative margin it needs to center it with the rest of the content.

This works great, but I have images loading in via infinite scroll, and they are not manipulated by my script.

My infinite scroll js: http://static.tumblr.com/q0etgkr/ytzm5f1ke/infinitescrolling.js

$(window).load(function() {
    var centerBigImages = $(function() {
        $('img').css('marginLeft', function(index, value){
        if($(this).width() > 660) {
            return -($(this).width() - 660)/2;            
        }
        return value;
    });
});

centerBigImages();

I took a look at this DOMNodeInserted equivalent in IE?, but it was a little over my js newb head :(

Answer 1

After running a JS-beautifier on the minified script for the infite-scroll you are using, I was able to find this documentation in Japanese. Running Google Translate on that, from what I can see, you should be able to pass a callback-function as the first parameter when calling the SendRequest() method, which I believe you call for your infinite-scroll.

In that case, you should be able to pass centerBigImages() as the first parameter:

SendRequest(centerBigImages, ...your other parameters);

Update:

Poking around a bit more, I found this unminified version of the script. Unfortunately the code comments are in Japanese, but I guess you could run Google Translate on those as well for some additional information.