javascript - 如何优化这个 CSS3/许多图像的性能？

Question

这里有一些事情我很想调整，但我不太确定我还能做什么。

缩略图和网站图标是通过外部服务提取的，我宁愿不设置反向代理来缓存它们。通常，图像在加载时应该平滑淡入（以一种“随机”顺序，它会产生很好的效果）。

你会注意到当页面加载时，它似乎有点不稳定，我认为是因为 twitter 脚本在加载所有缩略图的同时加载。

我已经尝试过查看几种性能工具，但对于如何改进这一点我有点茫然。

我唯一能想到的就是让推特偏移一两秒。

score 1 · Accepted Answer

您应该查看图像精灵和 HTMLdefer属性。您还应该考虑打包脚本，将它们移动到页脚并合并它们。CSS 也是如此，您应该将它们放在两个单独的组中，这将导致它们分两个“批次”加载。

score 0 · Accepted Answer

您总是可以先发制人地延迟图像的显示：

查询：

$(document).ready(function(){

  setTimeout(function(){
    $('img').css('opacity':'1');
  }, 2000);

});

CSS：

img{
  opacity:0;
  transition:opacity .5s;
}

score 0 · Accepted Answer

为 apache 服务器下载并安装 mod_pagespeed

3 回答 3