Четыре варианта:
Вот три варианта для вас:
Использовать фоновое изображение
Фоновый ответ Кангкана имеет это.
Если это не работает для вас, я предполагаю, что вам нужна только помощь с поддержкой JavaScript, поскольку вы сказали, что пользователи, не поддерживающие JavaScript, увидят другую страницу.
Использовать плагин
Выполнение пейджинга сделано . Вы сказали в комментарии, что используете jQuery. Существует множество плагинов jQuery для пейджинга. Найдите тот, который вам нравится, и используйте его. Они будут разного качества, так что вы захотите протестировать их и просмотреть их код, но я уверен, что есть приличное качество.
Пейджинг на стороне сервера
Здесь главная страница загружается либо без каких-либо продуктов, либо только с первой страницей продуктов. Обычно вы кладете все продукты в контейнер, например так:
<ul id='productList'>
</ul>
Тогда у вас будут обычные элементы управления пользовательским интерфейсом для перемещения по страницам результатов. У вас будет серверный ресурс, который возвращает фрагменты HTML или данные в формате JSON, которые можно использовать для заполнения этого списка. Я буду использовать HTML для простоты (хотя я, вероятно, буду использовать JSON в производственном приложении, так как он будет меньше). Каждая запись продукта представляет собой отдельный блок:
<li id='product-001'>
<div>This is Product 001</div>
<img src='http://www.gravatar.com/avatar/88ca83ed97a129596d6e8dd86deef994?s=32&d=identicon&r=PG'>
<div>Blurb about Product 001</div>
</li>
... и затем страница возвращает столько, сколько вы считаете подходящим. Вы запрашиваете страницу с помощью Ajax и обновляете список продуктов с помощью JavaScript. Поскольку вы сказали, что используете jQuery, это может быть тривиально просто:
$('#productList').load("/path/to/paging/page?start=X&count=Y");
Вот пример прототипа (не рабочий код); он подделывает Ajax, потому что JSBin давал мне проблемы с Ajax.
Одна большая загрузка страницы, затем клиентская страничка JavaScript
Я не уверен, как вы выполняете фильтрацию, но если у вас есть элемент, содержащий информацию о продукте, вы можете сохранить URL-адрес изображения в атрибуте data-xyz:
<div id='product-123' data-image='/images/foo.png'>
Затем, когда ваш код сделает это видимым, вы можете легко добавить к нему img:
var prod, imgsrc, img;
prod = document.getElementById('product-123');
prod.style.display = 'block'; // Or whatever you're doing to show it
imgsrc = prod.getAttribute('data-image');
if (imgsrc) {
img = document.createElement('img');
img.src = imgsrc;
prod.appendChild(img); // You'd probably put this somewhere else, but you get the idea
prod.removeAttribute('data-image');
}
Редактировать В другом комментарии вы сказали, что используете jQuery. Если это так, перевод вышеприведенного может выглядеть следующим образом:
var prod, imgsrc, img;
prod = $('#product-123');
prod.show();
imgsrc = prod.attr('data-image');
if (imgsrc) {
$("<img/>").attr('src', imgsrc).appendTo(prod); // You'd probably put this somewhere else, but you get the idea
prod.removeAttr('data-image');
}
Нет необходимости удалять его снова при скрытии, поскольку изображение уже будет отображаться, поэтому я удаляю атрибут, как только мы его используем.
Причиной, по которой я использовал префикс data-, является проверка: начиная с HTML5, вы можете определить свои собственные data-xyz атрибуты, и ваши страницы все равно будут проходить проверку. В более ранних версиях HTML вам не разрешалось определять свои собственные атрибуты (хотя на практике браузер не заботился об этом), и поэтому, если вы использовали для этого свой собственный атрибут, страница не прошла бы проверку.
Ссылки (w3.org):
Не по теме, но лот этого материала становится намного проще, если вы используете библиотеку JavaScript, такую как jQuery , Closure , Прототип , YUI или любой из нескольких других для сглаживания неровностей для вас. (Вы уже сказали, что используете jQuery. )