四个选项：

这是您的三个选择：

使用背景图片

如果这对您不起作用，我假设您仅需要有关启用Javascript的内容的帮助，因为您说过非Javascript用户会看到其他页面。

使用插件

分页 已完成
。您在评论中说过您正在使用jQuery。有很多用于分页的jQuery插件。找到您喜欢的一个，然后使用它。它们的质量各不相同，因此您需要对其进行测试并检查其代码，但是我敢肯定那里有质量不错的代码。

服务器端分页

在这里可以加载主页，而根本不加载任何产品，或者仅加载产品的第一页。通常，您会将所有产品放入容器中，如下所示：

<ul id='productList'></ul>

然后，您将具有通常的UI控件，可在结果页面之间移动。您将拥有一个服务器端资源，该资源返回可用于填充该列表的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 itimgsrc = 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-

data-xyz

）