JavaScript资源管理设计模式

时间:2010-05-14 21:50:11

标签: javascript design-patterns load

作为一名网络开发人员,我发现自己要解决的一个常见问题是在做其他事情之前等待加载某些内容。特别是,我经常在等待加载背景图像或CSS文件时隐藏(根据情况使用display: none;visibility: hidden;)元素。

从Last.FM考虑this example。他们在每张专辑艺术图像上叠加半透明的PNG,使其看起来像是在一个宝石盒中。它们会在加载时加载,因此根据您的互联网速度,您可能会暂时看到艺术图像(没有叠加层)。在这种情况下,专辑封面看起来很好,没有宝石盒效果。但在类似的情况下,我发现我不希望用户看到网站的设计因资源逐渐加载而受损。因此,在极少数情况下,我隐藏了用户的所有内容,直到整个套件和kaboodle已加载。但这通常很难写出来,并且可能迫使用户等待很长时间才能看到任何东西(除了“加载......”文本)。

我能想到(并且偶尔使用过)一些明显的解决方案/妥协:

  1. 使用一些内联CSS,以便在DOM的某些部分加载和渲染时,它们将立即具有正确的大小/位置等。

  2. 立即渲染网站的导航部分,这样如果用户想要纯粹使用当前页面到达其他地方,他们就不必等待其余部分加载。

    < / LI>
  3. 首先将像素化图像加载为布局占位符,同时将高质量图像作为替代品进行延迟加载。

  4. 在“加载......”阶段使用可爱的动画gif分散用户注意力的东西。

  5. 在加载完整UI时显示有用信息作为参考。 (类似于Gmail Inbox Preview等等。)

  6. (对不起,如果我的问题基本上只是被问到并回答了......)

    尽管有这些想法,我仍然发现自己希望有更好的方法来做这些事情。所以我想我正在寻找的是一些灵感和/或任何创造性的方法来处理你们可能在野外看到的这个问题。

1 个答案:

答案 0 :(得分:2)

这是一个常见问题。您最好的选择是优化网站以加快加载速度。试试YSlow

  • 合并所有JS和CSS资源,因此每个资源只有一个请求。
    • 有很多方法可以做到这一点,并且每个网络框架都有很多资产包装商
  • 确保首先处理您的布局CSS
  • 最大限度地减少网站中的图片数量。结合使用和使用CSS精灵有很多帮助
  • 如果仍然不够,您可以将布局和大小调整CSS放在HTML文件中,以确保浏览器在链接CSS之前先处理它