Pilhas carouFredSel responsivas no carregamento da página

Estou muito orgulhoso deste, mas gostaria de saber se existe uma maneira melhor.

Um problema que ocorre com muitos dos plug-ins de carrossel responsivos que usei recentemente é o empilhamento de conteúdo no carregamento da página. O conteúdo aparece brevemente antes que o plugin (neste caso específico, carouFredSel) calcule a altura ideal do contêiner com base na altura atual do slide.

Isso ocorre porque o plugin requer a altura do primeiro slide, para que possa ajustar a altura do contêiner de forma adequada.

Minha solução, para situações em que o conteúdo do slide é enquadrado por uma imagem, é aguardar a primeira das imagens carregar antes de inicializar o controle deslizante.

<div class="target-carousel" style="height: 0; overflow: hidden;">
    // Carousel here
</div>

var sliderLoaded = false;
function loadSlider() {
    if (sliderLoaded === true) {
        return false;
    }

    sliderLoaded = true;

    // Load slider here
};

$(window)
    .on('load', function() {
        var img = new Image();

        img.onload = loadSliders;

        img.src = $('.target-carousel li img').first().attr('src');

        setTimeout(loadSliders, 2000);
    });

Eu forneço um fallback de dois segundos para casos extremos em navegadores mais antigos onde o onloadevento não é disparado.

O exemplo usa windowo loadevento de porque esta é carouFredSela preferência de.