0

我正在尝试为我的网站编译一个 pinterest 样式的布局。并且已经完成了，除了加载时间。我已经着手尽可能快地加载我的网站。

为此，我遇到了延迟加载脚本（可以在此处找到：http: //www.appelsiini.net/projects/lazyload），它基本上首先加载站点，然后是图像，从而加快了可用性加载的网站，类似于 pinterest 所做的..

我遇到的问题是，虽然脚本可以工作，但因为我们在每个图像周围都有一个框来设置和呈现它，并且图像上未定义大小，所以每次布局都搞砸了。从本质上讲，一旦加载，图像大小总是会让布局感到惊讶。

解决此问题的最佳方法是什么？pinterest 是做什么的？与它们类似，我们有各种形状和大小的图像，用户将通过 php 和 javascript 将这些图像动态添加到我们的站点，因此我们无法自己简单地计算出每个图像的所有大小。

谢谢你的帮助！

4

1 回答 1

2

Pinterest 很可能已经测量了图像并将图像尺寸存储在数据库中。然后简单地输出 img 标签内的高度，宽度不是动态的，因为它由 CSS 设置

首先在 css 中设置规则控制图像的宽度（这不会改变）：

.pin .ImgLink img
{
  max-width: 192px;
  opacity: 1;
}

.PinImageImg
{
  min-height:75px;
  background-color:#f2f0f0
}

然后每个 img 标签的 HTML 标记控制高度（每个图像都会改变）：

<img src="http://media-cache-ec5.pinterest.com/upload/177118197817236677_8RujApQy_b.jpg" alt="Moon Goddess Gown by Halston Heritage" data-componentType="MODAL_PIN" class="PinImageImg" style="height: 288px;" />

这种方式不会弹出布局，因为每个图像都是由 javascript 加载的。

于 2013-01-18T21:46:47.990 回答