2

I've put myself into an uneasy situation, where I have roughly 200 posts I need to load in with jQuery .load(). Nothing shows up until the whole .load() has executed, of course. Takes roughly 3 to 4 seconds.

What would be the best way to chop up the big load query to smaller junks, like 50 posts per query. So that the user would see something at least, most of the posts are under the fold anyway.

It can't be a lazy load or infinite scroll, cause there's an Isotope filter at the top and all post eventually have to be in the DOM to be sortable.

EDIT:

The code that handles the ajax load:

// Get time for measuring the load duration
$then = $.now();

var init2 = function() {
    // Du stuff while the ajax load
},
// Do stuff after ajax load
ajaxLoad2 = function(html) {
    window.$body.addClass('ajax-load-done');
    // Init lazy load on images with Unveil
    $('img')
        .on("unveiled", function() {
            this.style.opacity = 1;
            $('body, html').scroll();
        })
        .unveil({
            threshold: 600,
            debounce: 30,
        });
    // Run title function
    titler(html);
    init2();
    // Measure the time it took to run the ajax request
    $now = $.now();
    var totalTime = ($now - window.$then) / 1000 % 60;
    console.log('all models loaded in ' + totalTime + ' seconds');
};
init2();

// This is the ajax request function
var loadModels = function() {
    // Get the site domain
    var href = window.location.origin + '/model',
        // This is the load container
        $underlayer = $('#underlayer');
    // Load animation spinner
    $underlayer.html("<p class='text-wrap-2 loader'>Loading</p><p class='loader--text'>Loading models, wait for it...</p>");
    // The actual load
    $underlayer.load(href + ' #content>*', ajaxLoad2);
}
var $overlayer2 = $('#overlayer');
// Check from the body class that it is s post type model and single and execute the load
if (window.$body.hasClass('root-single-model') && $overlayer2.offsetParent !== null ) {
    loadModels();
}

And heres an illustration what I'm trying to achieve:

enter image description here

The problem is that the 2) ajax load take about too long, about 3 seconds if cached and even up 8 sec if not.

closed as off-topic by kaiser Jul 25 '14 at 13:04

This question appears to be off-topic. The users who voted to close gave this specific reason:

If this question can be reworded to fit the rules in the help center, please edit the question.

  • 5
    Please show us the complete code. – kaiser Jul 1 '14 at 10:03
  • 2
    Have you tried using conditional load statements based on ID ranges? If 1-50 loads, then load 51-100, etc. – Melanie Sumner Jul 1 '14 at 11:24
  • @kaiser I edited the post – any_h Jul 2 '14 at 10:25
  • @MelanieSumner great idea, I'll give it a try – any_h Jul 2 '14 at 10:26
  • 1
    Hm. How do you register the AJAX call? Hooked via standard WP AJAX hooks? How does your PHP callback look like? Maybe you want to click tough to the ajax archives to see how AJAX calls are normally done in WP. I'd say the bottleneck probably is either the way you run the AJAX call, or the PHP callback and your DB query there. Or a bunch of plugins that load during AJAX calls. – kaiser Jul 2 '14 at 11:05

Browse other questions tagged or ask your own question.