Four options:
Here are three options for you:
Use a background image
Kangkan's background answer has this covered.
If that doesn't work for you, I'm assuming you only need help with the JavaScript-enabled stuff, since you said the non-JavaScript users will see a different page.
Use a plug-in
Paging has been done. You've said in a comment that you're using jQuery. There are lots of jQuery plug-ins for paging. Find one you like, and use it. They will be of varying quality, so you'll want to test them out and review their code, but I'm sure there's a decent-quality one out there.
Server-side Paging
This is where the main page loads either without any products at all, or with only the first page of products. Typically you'd put all of the products into a container, like this:
<ul id='productList'>
</ul>
Then you'd have the usual UI controls for moving amongst the pages of results. You'd have a server-side resource that returned HTML snippets or JSON-formatted data that you could use to populate that list. I'll use HTML for simplicity (although I'd probably use JSON in a production app, as it would tend to be smaller). Each product entry is its own self-contained block:
<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>
...and then the page returns as many of these as you think is appropriate. You request the page using Ajax and update the product list using JavaScript. Since you've said you use jQuery, this can be be trivially simple:
$('#productList').load("/path/to/paging/page?start=X&count=Y");
Here's an example prototype (not production code); it fakes the Ajax because JSBin was giving me Ajax issues.
One big page download, then client-side JavaScript paging
I'm not sure how you're doing your filtering, but if you have an element that contains the product information, you can store the image URL in a data-xyz attribute on it:
<div id='product-123' data-image='/images/foo.png'>
Then when your code makes that visible, you can easily add an img to it:
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');
}
Edit In a comment elsewhere you said you're using jQuery. If so, a translation of the above might look like this:
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');
}
No need to remove it again when hiding, since the image will already be shown, which is why I remove the attribute once we've used it.
The reason I've used the data- prefix is validation: As of HTML5, you can define your owwn data-xyz attributes and your pages will still pass validation. In earlier versions of HTML, you were not allowed to define your own attributes (although in practice no major browser cares) and so if you used your own attribute for this, the page wouldn't validate.
References (w3.org):
Off-topic, but a lot of this stuff gets a lot easier if you use a JavaScript library like jQuery, Closure, Prototype, YUI, or any of several others to smooth over the rough edges for you. (You've since said you're using jQuery.)
