缓慢加载第一个图像砌体

Question

我在我的网站上使用masonry plugin

我的问题是，前20张图片需要很长时间才能加载，直到完全充电并保留在页面左侧以形成一列图像。

如何使用此插件加快我网页上的前20张图片？

非常感谢

Answer 1

与上面提到的CDN一起，或者我建议获得更小的图像。无论哪种方式，都有一个imagesLoaded插件与砌体齐头并进，确保图像在渲染框之前已完全加载。

抓住插件here。

一旦你安装了插件包裹你的砌体调用，就像这样：

var $container = $('#container');
$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector : '.item',
    columnWidth : 240
  });
});

与Masonry一起使用的另一个很棒的插件是infinite-scroll。如果您想要帮助设置它，请告诉我。

Answer 2

您可以使用CDN或从其他域加载它们。浏览器通常可以每个域一次传输八个文件。使用不同的域或CDN可以绕过此限制。