Ползунок, работающий в Firefox, но фанки в Chrome/Safari

Question

Любые идеи, как я могу заставить этот слайдер работать правильно? Я использую слайдер, который я нашел здесь: http://kenwheeler.github.io/slick/

Это обычная тема WordPress, которую я приближаю к концу разработки. Когда я загружаю внутренние страницы, которые используют этот слайдер, в Firefox они, похоже, работают правильно. Но когда я загружаю их в Chrome/Safari, они загружают полупрозрачный слайд, затем сортируют, а затем начинают работать нормально. Но загрузка слайдера довольно фанковая. Вы можете видеть, о чем я говорю на сайте dev здесь, например.

http://supreme.asenka.com/brands/garden-fresh/

Не совсем уверен, что эта проблема может быть. Любая помощь будет принята с благодарностью.

Спасибо!

Answer 1

Wrap следующая функция вокруг вашего $('.yourdiv').slick();:

$('#div-containing-your-images').load(function(){ 
    $('.yourdiv').slick(); 
} 

Разница между document.ready и document.load заключается в следующем:

document.ready будет срабатывать, когда все HTML элементы отображаются. Как только тег, например, отображается, он загорится. Это не имеет значения, если изображение уже загружено.

document.load будет запущен, как только все объекты, iframe, изображения будут загружены на вашу страницу. Например, если у вас есть <img src="yoursource.jpg"/>, он загорится, когда загрузится изображение.