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加载的。

在布局/负载等方面处理可变图像尺寸

1 个答案: