Галерея с высоким скольжением Загружает изображения после нажатия на миниатюры (улучшает скорость просмотра страниц)
Я использую галерею jQuery Highslide для загрузки альбомов и их миниатюр на одной странице. Пользователи могут щелкнуть миниатюру, и каждый альбом затем загрузится.
Веб-сайт работает медленно, если у меня более 10 альбомов на странице (из-за загрузки больших пальцев и фотографий) Я использую кодировку base64 для данных в базе данных.
Как я могу загружать только большие пальцы, а не целые альбомы? Альбом загрузится только после того, как пользователь нажмет на миниатюру..
<?php
//vars
$albumsQuery = mysql_query("select * from albums");
$album_count = 0;
// start loop
while ($album = mysql_fetch_array($albumsQuery)) {
$album_count++;
$unserializePhotos = unserialize(base64_decode($album['photos']));
$unserializeDescriptions = unserialize(base64_decode($album['descriptions']));
$firstPhoto = '';
$first_photo_count = 0;
foreach ($unserializePhotos as $k => $v) {
if ($first_photo_count == 0) {
$firstPhoto = $v['name'];
}
$first_photo_count++;
}
$first_desc_count = 0;
foreach ($unserializeDescriptions as $k => $v) {
$unserializeDescriptions[$k]=htmlspecialchars($v);
if ($first_desc_count == 0) {
$firstDesc = htmlspecialchars($v);
}
$first_desc_count++;
}
?>
<div class="highslide-gallery">
<a class='highslide' id="thumb<?php echo $album_count; ?>" href='/albums/<?php echo $firstPhoto; ?>' onclick="return hs.expand(this, {slideshowGroup: <?php echo $album_count; ?>})">
<img src='/albums/<?php echo $firstPhoto; ?>' height="100px" width="100px" />
</a>
<div class="hidden-container">
<?php
$photoDescIndex = 0;
foreach ($unserializePhotos as $k => $v) {
if ($v['name'] != '' && $v['name'] != $firstPhoto){
?>
<a class='highslide' href='/albums/<?php echo $v['name']; ?>' onclick="return hs.expand(this, {slideshowGroup: <?php echo $album_count; ?>})">
<img src='/albums/<?php echo $v['name']; ?>' />
</a>
<?php
}
$photoDescIndex++;
}
?>
</div>
1 answers
Вы загружаете полное изображение в миниатюру:
<img src='/albums/<?php echo $firstPhoto; ?>' height="100px" width="100px" />
. Браузеру требуется больше времени для загрузки большой фотографии и еще больше времени для ее изменения. Вы должны подготовить небольшие эскизы размером 100х100 на стороне сервера.Вы не должны загружать все альбомы
<div class="hidden-container">...</div>
явно. Загружайте содержимое выбранного альбома через AJAX по требованию (когда пользователь нажимает на миниатюру). Кроме того, вы можете начать предварительную загрузку альбомов в фоновом режиме после загрузки страницы.-
Не назначайте обработчики событий непосредственно к каждому
onclick="..."
- используйте делегирование событий , например$("body").on("click", ".highslide", function() { var album_count = this.id.slice(5); // a id="thumb<?php echo $album_count; ?>" var target = $(this).next("div.hidden-container"); // TODO: load album album_count into target via AJAX // TODO: after load: hs.expand(this, {slideshowGroup: album_count}); });