Slick: slow initial load

[kmichaela]

The Javascript loads too slowly that the images/blocks become a vertical stack until everything loads. This is less than a second but does bounce the page. Tried to add the classes required by slick to initialize slider and didn't work. Is there a way that you can have the slider load horizontally first so that the page does not bounce

[shrmnk]

Try lazyloading.

[nominalaeon]

Lazyloading's the right answer. A hack I've used in the past is to toggle visibility using the init callback.

.slick-frame {
  visibility: hidden;
}
$('.slick-frame').on('init', function () {
  $slickFrame.css({visibility: 'visible'});
});
$('.slick-frame').slick();

Don't use display: none, Slick won't be given a height value for the slides if'n you do.

[tomaszbujnowicz]

@nominalaeon thanks for the solution, it did the trick ;) Although it's not the most stylish solution as there is a blank space when the page loads (in the place where carousel will appear). Would be nice to have a preload with the spinner as default feature. Actually, ideally would be to see it in the core version of the plugin ;)

[rphelan]

You can also do this in pure CSS using the .slick-initialized class.

.slick-frame {
    visibility: hidden;
}
.slick-frame.slick-initialized {
    visibility: visible;
}

[bunderwood]

@rphelan did the trick for me! I spent HOURS trying other hacks to delay loading with js timers, etc. Thanks a bunch.

[s2501]

@rphelan thanks a ton, probably would have spent hours, before figuring out which approach is best.
Your solutions further tweaked.
.slick-frame {

background: #fff url('../img/carousel-loader/ajax-loader.gif') center center no-repeat;
height: 300px;
overflow: hidden;

& > .generic-item-wrap-class {
    visibility: hidden;
}

&.slick-initialized {
    background: none;
    height: auto;
    overflow: auto;

    & > .generic-item-wrap-class {
        visibility: visible;
    }
}

}

[samdoidge]

Thanks! @rphelan's fix worked for me, replacing .slick-frame with the class of my carousel.

[GuitarKat]

@rphelan's fix also worked for me. Simple and effective. Another thing to note is to look in the stack of how the script is loading on the waterfall in the network tab or if it's combined with other scripts in any fashion.