处理像布局/加载pinterest可变图像大小

我想为我的网站编译pinterest样式布局。并已完成它，除了加载时间。我已经开始尽可能快地获得我网站的负载。处理像布局/加载pinterest可变图像大小

为此，我遇到了惰性加载脚本（如可在此处找到：http://www.appelsiini.net/projects/lazyload），它首先加载网站，然后加载图像，从而加速网站加载时的可用性，类似于什么pinterest ..

我一直有的问题是，虽然脚本的作品，因为我们有一个围绕每个图像的风格和展示，并在图像上未定义的大小，布局出来都搞砸了每次。实质上，一旦图像大小加载，图像大小总是令人惊讶。

解决此问题的最佳方法是什么？ pinterest做什么？与他们类似，我们拥有所有形状和大小的图像，这些图像将通过php和javascript动态添加到我们的网站上，因此，简单地确定每张图片的所有尺寸并不是我们可以做到的。

感谢您的帮助！

来源

2013-01-18 Brandon Willbanks

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-18 21:46:47

处理像布局/加载pinterest可变图像大小

回答

相关问题