Rails：如何将消息预加载到用户

Question

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

向用户显示消息的好方法是该网站需要一些时间才能加载，但是在一段合理的时间后该消息会消失。我猜测一个带有计时器的jQuery fadeOut（），但我不知道设置计时器的时间有多长，因为我不知道它什么时候开始计数。

有什么建议吗？

Answer 1

我之前在我写的应用程序中不得不处理这种情况，所以希望我的建议会有所帮助！我会：

1. 加载一个非常基本的DOM标记，尽可能作为准系统。 Barebones在外部没有资产加载，只有纯html标签和css。这应该很快加载。有一个包含某种消息的div，让用户知道图片正在加载（例如<div class = 'loading_images'>loading...</div>）
2. 既然你提到了jQuery，我假设你可以访问它，否则你可以只使用标准的Javascript。这里的想法是使用AJAX检索您尝试加载的图像，将图像插入到检索后需要放入的任何DOM元素中，然后在完成所有操作后关闭加载消息。这样，您就不必担心设置计时器并猜测请求需要多长时间才能完成。请求完成后，您可以关闭加载消息并继续您的快乐方式。无论你在哪里包含你的jQuery，都要在document.ready handler
中加入这样的东西

$(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()
                                }  
                      });
  })

此代码将等待加载DOM，然后创建新的AJAX请求以检索要插入页面的图像。如果成功加载图像，则使用图像（名为“data”的变量）调用success方法，然后将其插入到您希望的位置。最后，隐藏加载消息，以便用户可以完全与页面及其内容进行交互。

这里有两点需要注意：

• 目前，如果请求失败，代码将不会执行任何操作（例如，图像未通过AJAX成功加载）。有关如何处理该情况，请参阅$ .ajax和错误回调的jQuery文档。
• 上面编写代码片段的方式，只会加载一个图像。对于快速入侵加载你拥有的许多图像，你可以在for循环中包含AJAX请求并以这种方式加载你的图像。这不是一个好习惯，所以我建议你考虑创建一个图像精灵，通过AJAX只检索那个图像精灵，然后使用CSS从较大的图像中剪掉较小的图像。