Javascript Rails：如何向用户预加载消息

我有一个基于Rails的发布前网站，它有一些旋转的背景图像（这对于推销网站的理念很重要），加载时间太长，以至于用户在加载之前就离开了网站。他们看到的唯一东西是电子邮件提交框

向用户显示一条消息的好方法是什么？该消息需要一段时间才能加载，但在一段合理的时间后该消息就会消失。我猜是一个带有计时器的jQuery fadeOut（），但我不确定设置计时器的时间，因为我不确定它将在什么时候开始计数

---

有什么建议吗？

我以前在自己编写的应用程序中遇到过类似的情况，希望我的建议能有所帮助！我想：

加载尽可能简单的基本DOM标记。没有外部加载的资产，只有纯html标记和css。这应该很快加载。有一个div，其中包含某种消息，让用户知道图像正在加载（例如，

加载…

）

既然您提到了jQuery，我假设您可以访问它，否则您可以使用标准Javascript来实现这一点。这里的想法是使用AJAX检索要加载的图像，将图像插入到检索后需要放入的任何DOM元素中，然后在完成后关闭加载消息。这样，您就不必担心设置计时器和猜测完成请求需要多长时间。请求完成后，您可以取消加载消息，继续您的快乐之路。无论在何处包含jQuery，都要在document.ready处理程序中放入类似的内容

$（文档）.ready（函数（）{ var请求=$.ajax({ url:url\u到您的图像， 键入：“获取”， 成功：功能（数据）{ $（无论上下文是什么或div到插入图像）。html（数据） $（'.loading_images'）.hide（） } }); }) 这段代码将等待DOM加载，然后创建一个新的AJAX请求来检索要插入页面的图像。如果成功加载映像，将使用映像（名为“data”的变量）调用success方法，然后将其插入到您希望它去的任何地方。最后，加载消息是隐藏的，以便用户可以与页面及其内容完全交互

这里有两件重要的事情需要注意：

• 目前，如果请求失败，代码将不会执行任何操作（例如，图像没有通过AJAX成功加载）。有关如何处理这种情况，请参阅jQuery文档中的$.ajax和错误回调
• 按照上面代码段的编写方式，只会加载一个图像。为了快速加载不管有多少图像，您可以将AJAX请求包含在For循环中，并以这种方式加载图像。这不是一个好的实践，所以我建议你考虑创建一个图像精灵，通过Ajax检索那个图像精灵，然后用CSS从较大的图像中剪辑更小的图像。

$(document).ready(function(){ var request = $.ajax({ url:url_to_your_image, type:"GET", success:function(data){ $(whatever_context_or_div_to_insert_your_image).html(data) $('.loading_images').hide() } }); })