Из-за чего медленно прогружаются картинки?

Question

[hakkol]

Доброго времени суток, делал слайдер Работает слайдер благодаря OWL Carousel. Возникли следующие вопросы:
1) Когда прокручиваю слайдер, у маленькой картинки появляется сперва нижняя половина, спустя 1-2 секунды верхняя. Почему получается задержка?
2) Стили, которые я писал к содержимому элементов слайдера перебивают стили карусели. Пришлось добавлять !important. Почему мои стили не в приоритете?
3) Имеет ли смысл, если я работаю с сеткой бутстрап, элементы слайдера помещать скажем в col-md-3? Пытался так сделать, но происходило наложение стилей карусели и бутстрапа.

<section class="s_rewview">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div class="carousel">
						<div class="content_1">
							<div class="content_1_img">
								<img src="img/profile_1.png" alt="alt">
							</div>
							<div class="cont_info_1">
								<h2>Lorem ipsum dolor sit amet consectetur</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis suscipit est, ut imperdiet tortor. Proin sed molestie massa. </p>	
							</div>
						</div>
						<div class="content_2">
							<div class="content_2_img">
								<img src="img/profile_2.png" alt="alt">
							</div>
							<div class="cont_info_2">
								<h2>Adipiscing elit auris mattis suscipit est</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis suscipit est, ut imperdiet tortor. Proin sed molestie massa.</p>
							</div>	
						</div>
						<div class="content_3">
							<div class="content_3_img">
								<img src="img/profile_3.png" alt="alt">
							</div>
							<div class="cont_info_3">
								<h2>Mauris mattis suscipit est, ut imperdiet tortor</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis suscipit est, ut imperdiet tortor. Proin sed molestie massa. </p>	
							</div>
						</div>
						<div class="content_4">
							<div class="content_4_img">
								<img src="img/profile_4.png" alt="alt">	
							</div>
							<div class="cont_info_4">
								<h2>Lorem ipsum dolor sit amet consectetur </h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis suscipit est, ut imperdiet tortor. Proin sed molestie massa. </p>	
							</div>	
						</div>
						<div class="content_1">
							<div class="content_1_img">
								<img src="img/profile_1.png" alt="alt">
							</div>
							<div class="cont_info_1">
								<h2>Lorem ipsum dolor sit amet consectetur</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis suscipit est, ut imperdiet tortor. Proin sed molestie massa. </p>	
							</div>
						</div>
						<div class="content_2">
							<div class="content_2_img">
								<img src="img/profile_2.png" alt="alt">
							</div>
							<div class="cont_info_2">
								<h2>Adipiscing elit auris mattis suscipit est</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis suscipit est, ut imperdiet tortor. Proin sed molestie massa.</p>
							</div>	
						</div>
						<div class="content_3">
							<div class="content_3_img">
								<img src="img/profile_3.png" alt="alt">
							</div>
							<div class="cont_info_3">
								<h2>Mauris mattis suscipit est, ut imperdiet tortor</h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis suscipit est, ut imperdiet tortor. Proin sed molestie massa. </p>	
							</div>
						</div>
						<div class="content_4">
							<div class="content_4_img">
								<img src="img/profile_4.png" alt="alt">	
							</div>
							<div class="cont_info_4">
								<h2>Lorem ipsum dolor sit amet consectetur </h2>
								<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mattis suscipit est, ut imperdiet tortor. Proin sed molestie massa. </p>	
							</div>	
						</div>
					</div>
				</div>
			</div>
		</div>			
	</div>
</section>

.content_1_img img, .content_2_img img, .content_3_img img, .content_4_img img {
	height: 88px;
	width: 88px !important;
	border-radius: 50%;
	margin: 125px 0 0 86px;
	display: inline-block !important;
}

Answer 1

[Дима Паутов]

Может для начала понять как слайдер тот работает?
И скорей всего сами картинки очень большие!

Answer 2

[Mr Crabbz]

Дайте линк на живое превью.
Часто работаю с OWL - помогу.

Comments

[hakkol]

не совсем Вас понял, нужна ссылка на сайт?

[Дмитрий]

hakkol: да, это был сленг)

Answer 3

[Алексей]

По второму вопросу - смотри какой стиль подключается раньше, твои должны быть последними + селекторы должны быть равноправными или твои сильнее.
По первому вопросу - продебаж время загрузки страницы, посмотри что когда грузится и как долго. Если долго грузятся картинки - уменьши их размер. Будет больше инфы, проще найти ответ.
По третьему вопросу, посмотри в сторону FlexSlider 2, давно его юзал, но конфликтов никаких не вызывал.

Comments

[hakkol]

картинки вешают по 10кб примерно, работаю в хроме, открыл в фаерфоксе - проблемы нет

[Алексей]

Хм... смотри в хроме где затык идет, что долго грузится. Поставь в скрипте слайдера вывод временных меток, посмотри где провал идет... 10кб должны залетать мгновенно.