Резиновый сайт и разрешение экрана

L
На сайте с 17.05.2013
Offline
88
773

Такая ситация:

есть резиновая страница на которой выводятся фотки. Т.к. она резиновая, то в зависимости от разрешения юзера будет выводиться разное количество этих фоток в 1 строке. Задача: как вывести нужное количество фото чтобы все строки были полными( тоесть если при 1600х900 выводится 8 в ряд, то всего выводим 10 рядов - 80 фото, при 1024х768 - 5 в ряд, то всего будет 5*10=50

Как узнать наперед к-во выводимых фото??

Сделал так:

ширина экрана юзера передается в пхп скрипт так:

$(document).ready(function() {

$.ajax({ type: "POST",

url: "http://site.com/list.php",

data: "width=" + screen.width,

success: function(data) {

var html = '';

var response = jQuery.parseJSON(data);

var arr = response['list'];

for(var key in arr){

html = html + arr[key].title;

}

$("#list"+next).html(html);

}

});

});

И в скрипте в зависимости от ширины выводится нужное количество элементов в зависимости от разрешения.

Все работает но есть большой минус - вначале грузится хедер и футер страницы, а потом где-то через секунду основное содержимое. Задержка может быть больше если у пользователя слабый интернет.

Подскажите как еще млжно реализовать данную задачу с меньшими извращениями?

vob2014
На сайте с 30.03.2014
Offline
91
#1

а почему через 1 сек? Хостинг слабый и пинг большой?

...
LEOnidUKG
На сайте с 25.11.2006
Offline
1762
#2
vob2014:
а почему через 1 сек? Хостинг слабый и пинг большой?

Нет, просто сначала выводиться HTML, а потом обрабатывается JS

ТС, ну тут или мериться с этим, 1 секунда это не много

ИЛИ

выводить максимальное возможное количество фотографий и потом просто их скрывать через тот же JS и CSS

Ещё для них можно подключить LazyLoad, чтобы картинки не прогружались, если они не в поле видимости.

ИЛИ

подгружать максимальное количество урлов на картинки в массив JS т.е. уже подготовленных. А потом генерировать на лету img элементы в нужно количестве. И главное напишите это на чистом JS, тогда это выполниться моментально и не нужно будет тыркать PHP файл.

✅ Мой Телеграм канал по SEO, оптимизации сайтов и серверов: https://t.me/leonidukgLIVE ✅ Качественное и рабочее размещение SEO статей СНГ и Бурж: https://getmanylinks.ru/ ✅ Настройка и оптимизация серверов https://getmanyspeed.ru/
L
На сайте с 17.05.2013
Offline
88
#3

да вроде бы нормальный.. Даже на локальном компьютере все-рано есть задержка, т.к. передается относительно большой объем данных, массив около 100 элементов

---------- Добавлено 11.03.2015 в 23:43 ----------

LEOnidUKG а можно по пункту 2 чуть детальнее объяснить как это сделать?


выводить максимальное возможное количество фотографий и потом просто их скрывать через тот же JS и CSS
LEOnidUKG
На сайте с 25.11.2006
Offline
1762
#4
LEOnidUKG а можно по пункту 2 чуть детальнее объяснить как это сделать?

Это к верстальщикам. Но я лично рекомендую 3-й пункт. Он быстрее и не будет нагружать пользователей загрузкой лишних фоток.

vob2014
На сайте с 30.03.2014
Offline
91
#5

что-то 1 сек это явно какая-то засада где-то! Я попробовал похожий код только без jQuery (голый яакс) у меня 0.2 сек при пинге до хостинга 25 мс, Хостинг шаредный и php не самый быстрый. Голый аякс - не надо ждать документ риди как у jQuery. Имхо на мощном быстром сервере с быстрым широким каналом скорее всего можно и до 1/10 сек довести отклик.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий