处理诸如布局/加载之类的可变图像大小

Question

我正在尝试为我的网站编译pinterest样式布局。 并完成了此任务，除了加载时间。 我已经准备好尽快获取网站的负载。

为此，我遇到了延迟加载脚本（可以在这里找到： http : //www.appelsiini.net/projects/lazyload ），该脚本实际上首先加载了站点，然后加载了图像，从而加快了可用性。网站的负载情况，与pinterest相似。

我遇到的问题是，尽管脚本起作用了，因为我们在每个图像周围都有一个框来设置样式并显示它，并且图像上的尺寸没有定义，因此布局每次都变得混乱。 本质上，一旦加载图像大小，布局总是令人惊讶。

解决此问题的最佳方法是什么？ pinterest是做什么的？ 与它们类似，我们拥有各种形状和尺寸的图像，用户将通过php和javascript将它们动态添加到我们的网站中，因此，简单地自己弄清楚每个图像的所有尺寸是我们不能做的。

谢谢你的帮助！

Answer 1

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加载，因此不会弹出布局。