Lookahead loading with random order [SOLVED]

[panablue]

In case it's useful to anyone:

For non-random lookahead rotators I've found that at least the first 2 slide images have to be marked up normally (without the data-cycle-src attribute), however this doesn't work with the random option since it isn't known which slides will appear first.

Adding this snippet (updating the selector as needed) within the lookahead loading plugin loads the first two of the randomized slide images immediately:

// other plugin stuff above...
$(document).on( 'cycle-initialized', function(e, opts) {


// load first 2 images after randomizing
    var firstimages = document.querySelectorAll('.cycle-slideshow li:nth-child(-n+2) img[data-cycle-src]');
    for (var i = 0; i < firstimages.length; i++) {
        firstimages[i].src = firstimages[i].dataset.cycleSrc;
        firstimages[i].removeAttribute('data-src');
    }


var key = 'cycle-look-ahead';
// other plugin stuff below...

Note that using an appropriately-sized placeholder src image and height/width attributes avoids potential issues with autoheight, centering and reflow:

<img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20WIDTHGOESHERE%20HEIGHTGOESHERE'%3E%3C/svg%3E" data-cycle-src="REALIMAGEPATH" width="WIDTHGOESHERE" height="HEIGHTGOESHERE" alt="">