JavaScript资源管理设计模式

作为一名Web开发人员，我发现自己正在处理的一个常见问题是在执行其他操作之前等待某些内容加载。特别是，我经常在等待背景图像或CSS文件加载时隐藏（根据情况使用display: none;或visibility: hidden;）元素。JavaScript资源管理设计模式

考虑来自Last.FM的this example。他们在每张专辑封面上叠加一张半透明的PNG图片，以便它看起来像是在一个珠宝盒内。它们在加载时会让它加载，所以根据您的网速，您可能会暂时看到艺术图像（没有覆盖图）。在这种情况下，专辑艺术看起来很好，没有珠宝效果。但在类似的情况下，我发现我不希望用户看到网站的设计随着资源的增量加载而变得不合时宜。因此，在极少数情况下，我已经隐藏了用户的所有内容，直到整个套件和kaboodle已经加载。但是这往往是写出来的痛苦，并且可能迫使用户等待很长时间才能看到任何东西（除了“加载...”文本之外）。

我能想到的（和偶尔使用了）一些明显的解决方案/妥协：

使用一些内联CSS使得DOM负荷的某些部分和渲染，他们会立即有正确的尺寸/位置/等。
立即呈现网站的导航部分，以便如果用户想要使用当前页面纯粹是为了去其他地方，他们不必等待其余的加载。
首先加载像素化图像作为布局的占位符，同时延迟加载更高质量的图像作为替换。
在“加载...”阶段使用可爱的动画gif分散用户的注意力。
加载完整用户界面时显示有用的信息作为参考。（一种近乎Gmail Inbox Preview等）

（很抱歉，如果我的问题是基本上只是提出和回答...）

尽管所有这些想法，我仍然觉得自己希望能有更好的方法做一些这些事情。所以我想我正在寻找的是一些灵感和/或解决这个问题的创造性方法，你们可能在野外看到过。

来源

2010-05-14 Adam

至于之前先对其进行处理图像：使用CSS为具有带动画gif（加载gif）的'background'属性的图像设置类。这可能是最无痛苦的方式。 – FK82 2010-05-15 11:30:48

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

结合所有的JS和CSS资产，所以每个只有一个请求。
- 有这样做的各种方式和数量的资产打包存在每一个Web框架在那里
确保您的布局CSS是处理连线第一
最大限度地减少图像的数量在您的网站。合并的事情，使用CSS精灵有很大帮助
如果仍然是不够的，你可以把你的布局和大小CSS在HTML文件，以确保浏览器链接的CSS

来源

2010-05-14 23:27:32

谢谢丹尼尔！资产打包商是一个很好的提示。我忘了那些。至于第二个项目符号（“确保您的布局CSS是第一个被处理的”）：为此，需要在等待CSS加载时隐藏元素，否？我知道的第四个子弹（在回答中提到）。虽然这是一份很好的清单，但我仍然希望从社区中获得其他创意。 – Adam 2010-05-15 06:47:33

不需要隐藏东西，只需确保布局CSS是要加载的第一个CSS文件或HTML文档的HEAD中的CSS文本未链接。向web服务器（html和layout css）或者一个（嵌入css的html）发出两个请求应该很快。如果您的页面在加载时需要很长时间才能加载和转换，那么您可能依赖于图像进行布局？ – 2010-05-15 08:41:56

JavaScript资源管理设计模式

回答

相关问题