Скрипт спойлера с динамической загрузкой изображений
Данная тема является небольшой модификацией скрипта из темы Обновленного скрипта спойлера с плавным открытием и скрытием содержимого. Суть обновления заключается в том, что изображения, находящиеся под спойлером, не загружаются при загрузке странички, а загружаются только тогда, когда открывается спойлер, под которым они находятся.
Таким образом, при наличии на сайте большого количества "тяжелых" изображений их можно будет убрать под спойлеры, тем самым уменьшив трафик и увеличить скорость загрузки страничек.
Для наглядной демонстрации работы предлагаемого нами скрипта загрузки изображений, обратите внимание на спойлеры, находящихся чуть ниже:
Любой текст после изображения
Для работы скрипта спойлера с динамической загрузкой изображений Вам потребуется подключить на сайте библиотеку jQuery следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Для динамической загрузки изображений, Вам необходимо будет добавить на свой сайт JavaScript код, который также будет отвечать за открытие и скрытие спойлеров.
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler_head').click(function(){
$(this).next('.spoiler_body').fadeToggle('slow');
$(this).next().children('.load').each(function(){
$(this).attr({'src':$(this).attr('alt')});
});
});
});
</script>В том месте Вашего сайта, где Вы планируете разместить спойлеры с изображениями, необходимо использовать такой код:
<div class="spoiler_head">Заголовок № 1 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
Любой текст до изображения<br>
<img class="load" src="image/pixel.gif" alt="image/img_1.png">
</div>
<div class="spoiler_head">Заголовок № 2 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
<img class="load" src="image/pixel.gif" alt="image/img_2.png"><br>
Любой текст после изображения
</div>
<div class="spoiler_head">Заголовок № 3 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">
Загрузка нескольких изображений<br>
<img class="load" src="image/pixel.gif" alt="image/img_3.png">
<img class="load" src="image/pixel.gif" alt="image/img_4.png">
</div>Обращаем Ваше внимание на то, что изначально в закрытых спойлерах будет загружаться файл pixel.gif (прозрачная картинка размером в 1 пиксель). Реальный же URL изображения, которое должно показываться при открытии спойлера, мы указываем в атрибуте alt!
Для того чтобы изначально все спойлеры были закрыты, им необходимо задать стили. Для этого в шапку сайта между тегами <head> и </head> добавить следующие стили:
<style type="text/css">
.spoiler_body { display: none; font-style: italic; }
.spoiler_head {
cursor: pointer;
font-weight: bold;
text-decoration: underline;
color: #000099;
}
</style>Как Вы могли заметить, под спойлером помимо текста может находиться сразу несколько изображений и все они будут загружаться динамически при открытии спойлера. Добиться этого удалось путем использования функции для элементов набора each. Так что Вы можете помещать под спойлеры изображения сразу целыми группами.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
$(document).ready(function(){
$('.spoiler_head').click(function(){
$(this).next('.spoiler_body').fadeToggle('slow').load($(this).next('.spoiler_body').text());
});
});
HTML код спойлеров теперь будет выглядеть так:
<div class="spoiler_head">Заголовок № 1 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">test.php</div>
<div class="spoiler_head">Заголовок № 2 (кликните для открытия/закрытия)</div>
<div class="spoiler_body">test2.php</div>
test.php и test2.php - странички, которые будут подгружаться в тело спойлера при клике по его заголовку.
<img class="gjhj" src="/uploads/posts/2016-05/1462279566_1460388228_1439894723_paper_wars_cannon_fodder-coverart-174x300.jpg" alt="">
Что-нибудь можно сделать?
А зачем вообще грузить src="image/pixel.gif" не лучше ли без него?
<img class="load" alt="image/img_3.png">