Вывод серии изображений на сайте

@tager3 · Регистрация: 02.11.2010

Студворк — интернет-сервис помощи студентам

Всем привет.
Вот таким образом считываю в папке изображения и потом вывожу их.

PHP
1
2
3
4
5
6
7
8
$dir = '../work/photo/';
                    $list = scandir($dir);
                    $list = array_diff($list, array ('.','..','tmp'));
                    $count_message = 2+count($list);
 
                        for ($i=2; $i < $count_message ; $i++) { 
                            echo "<img src='../work/photo/".$list[$i]."' />";
                        }

Но проблема в том, что когда захожу на страницу, то вижу как эти картинки еще 2-3 секунды туда-сюда перестраиваются, не очень приятно все это наблюдать.

Может кто нибудь подскажет как решить такую проблему. Может есть какой-то вариант выводу изображений постепенно, при прокрутке вниз, или необходимо сделать какую-то предзагрузку?

@Jodah · 31.10.2017, 11:23

Если у всех изображений одинаковый размер или соотношение сторон, можно задать width и height в CSS, тогда скакать не будут.

@tager3 · 13.11.2017, 10:22 **[ТС]**

в том то и дело, что изображения разные , какие то горизонтальные, какие то вертикальные. Если задаю width, то при уменьшении экрана, изображения тогда обрезаются

@Phantom-84 · 13.11.2017, 16:48

tager3, попробуйте сканировать каталог до начала вывода страницы.

Добавлено через 2 минуты
И width само по себе ничего не обрезает. Это свойство определяет масштаб изображения.

Добавлено через 1 минуту
Возможно, вы путаете с шириной контейнера, в котором находится изображение.

@tager3 · 13.11.2017, 21:12 **[ТС]**

Phantom-84, подскажете как это сделать, сканировать раньше чем вывод?

@Jodah · 13.11.2017, 21:36

Сообщение от tager3

в том то и дело, что изображения разные

Как вариант, пройтись по всем файлам функцией getimagesize и сохранить размеры в БД. Когда юзер заходит на страницу, подставляем в контейнер каждого изображения его размеры.

ytf · 13.11.2017, 21:53

в крон можно запустить

PHP
1
2
3
4
5
6
7
8
9
<?php
$dir = '../work/photo/';
$list = scandir($dir);
$list = array_diff($list, array ('.','..','tmp'));
foreach ($list as $ig) {
list($w, $h) = getimagesize("../work/photo/".$ig);
$html .= "<img src='../work/photo/".$ig."' width='".$w."' height='".$h."' />";
}
file_put_contents("images_html_work_photo", $html);

а на странице написать

PHP
1
<?php echo file_get_contents("images_html_work_photo"); ?>

@tager3 · 14.11.2017, 08:05 **[ТС]**

ytf, так не получится, у меня разные фото на разных страницах, т.е разные пути. ((

Добавлено через 51 секунду
Jodah, а если у меня нет БД, то не получится ?

ytf · 14.11.2017, 10:31

в крон:

PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?php
$spisok_papok_s_kartinkami = array(
'../work/photo/',
'../work/photo2/'
);
foreach ($spisok_papok_s_kartinkami as $dir) {
 
$list = scandir($dir);
$list = array_diff($list, array ('.','..','tmp','images.html'));
foreach ($list as $ig) {
list($w, $h) = getimagesize($dir.$ig);
$html .= "<img src='".$dir.$ig."' width='".$w."' height='".$h."' />";
}
file_put_contents($dir."images.html", $html);
 
}

на странице

PHP
1
<?php echo file_get_contents("../work/photo/images.html"); ?>

@tager3 · 14.11.2017, 11:19 **[ТС]**

ytf, попробовал, не помогло, все равно картинки во время загрузки скачут 1-2 сек.

@Jodah · 14.11.2017, 14:18

Сообщение от tager3

если у меня нет БД

Тогда нужно хранить размеры где-то ещё.

@tager3 · 14.11.2017, 15:05 **[ТС]**

Jodah, а если хранить в xml например файле? можно как то реализовать ?

@Jodah · 14.11.2017, 16:47

tager3, как угодно, можно просто массив в файл записать с помощью serialize или json_encode.

@tager3 · 14.11.2017, 20:04 **[ТС]**

Jodah, ну для меня это сложно еще)

@Phantom-84 · 16.11.2017, 02:31

Сообщение от tager3

подскажете как это сделать, сканировать раньше чем вывод?

PHP
1
2
3
4
5
6
7
$dir = '../work/photo/';
                    $list = scandir($dir);
                    $list = array_diff($list, array ('.','..','tmp'));
                    $count_message = 2+count($list);
?>
<!DOCTYPE html>
...

Кстати, страница целиком или по крайней мере большая ее часть тоже может собираться до начала вывода.

ytf · 16.11.2017, 15:45

можно показывать серые квадратики, подгружать изображения, после этого отображать

Новые блоги и статьи Все статьи Все блоги /
Вывод данных через динамический список в справочнике Maks 01.04.2026 Реализация из решения ниже выполнена на примере нетипового справочника "Спецтехника" разработанного в конфигурации КА2. Задача: вывести данные из ТЧ нетипового документа. . .	Функция заполнения текстового поля в реквизите формы документа Maks 01.04.2026 Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .	К слову об оптимизации kumehtar 01.04.2026 Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .	Идея фильтра интернета (сервер = слой+фильтр). Hrethgir 31.03.2026 Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда anaschu 31.03.2026 В прикрепленном документе раздумья о том, как можно поменять модель в будущем	10 пpимет, которые всегда сбываются Maks 31.03.2026 1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .	Перемещение выделенных строк ТЧ из одного документа в другой Maks 31.03.2026 Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .	Functional First Web Framework Suave DevAlt 30.03.2026 Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .

@Jodah 3900 / 3238 / 1353 Регистрация: 01.08.2012 Сообщений: 10,914
	31.10.2017, 11:23
	Если у всех изображений одинаковый размер или соотношение сторон, можно задать width и height в CSS, тогда скакать не будут. 0

@tager3 5 / 5 / 3 Регистрация: 02.11.2010 Сообщений: 140
	13.11.2017, 10:22 [ТС]
	в том то и дело, что изображения разные , какие то горизонтальные, какие то вертикальные. Если задаю width, то при уменьшении экрана, изображения тогда обрезаются 0

@Phantom-84 377 / 319 / 73 Регистрация: 15.09.2017 Сообщений: 1,436
	13.11.2017, 16:48
	tager3, попробуйте сканировать каталог до начала вывода страницы. Добавлено через 2 минуты И width само по себе ничего не обрезает. Это свойство определяет масштаб изображения. Добавлено через 1 минуту Возможно, вы путаете с шириной контейнера, в котором находится изображение. 0

@tager3 5 / 5 / 3 Регистрация: 02.11.2010 Сообщений: 140
	13.11.2017, 21:12 [ТС]
	Phantom-84, подскажете как это сделать, сканировать раньше чем вывод? 0

@tager3 5 / 5 / 3 Регистрация: 02.11.2010 Сообщений: 140
	14.11.2017, 08:05 [ТС]
	ytf, так не получится, у меня разные фото на разных страницах, т.е разные пути. (( Добавлено через 51 секунду Jodah, а если у меня нет БД, то не получится ? 0

@tager3 5 / 5 / 3 Регистрация: 02.11.2010 Сообщений: 140
	14.11.2017, 11:19 [ТС]
	ytf, попробовал, не помогло, все равно картинки во время загрузки скачут 1-2 сек. 0

@tager3 5 / 5 / 3 Регистрация: 02.11.2010 Сообщений: 140
	14.11.2017, 15:05 [ТС]
	Jodah, а если хранить в xml например файле? можно как то реализовать ? 0

@Jodah 3900 / 3238 / 1353 Регистрация: 01.08.2012 Сообщений: 10,914
	14.11.2017, 16:47
	tager3, как угодно, можно просто массив в файл записать с помощью serialize или json_encode. 0

@tager3 5 / 5 / 3 Регистрация: 02.11.2010 Сообщений: 140
	14.11.2017, 20:04 [ТС]
	Jodah, ну для меня это сложно еще) 0

ytf 276 / 259 / 185 Регистрация: 15.08.2017 Сообщений: 1,483
	16.11.2017, 15:45
	можно показывать серые квадратики, подгружать изображения, после этого отображать 0