0

我有一个基于 Rails 的预启动站点，其中包含一些旋转的背景图像（这对于销售站点的想法很重要），加载时间过长，以至于用户在加载之前就离开了站点。他们唯一看到的是电子邮件提交框。

向用户显示网站将需要一些时间加载但然后在合理的时间段后让该消息消失的消息的好方法是什么。我猜测带有计时器的 jQuery fadeOut()，但我不确定将计时器设置多长时间，因为我不确定它什么时候开始计数。

有什么建议么？

4

1 回答 1

0

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

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

  var 请求 = $.ajax({
                        网址：url_to_your_image，
                        类型：“获取”，
                        成功：功能（数据）{
                                $(whatever_context_or_div_to_insert_your_image).html(数据)
                                $('.loading_images').hide()
                                }  
                      });
  })

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

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

  • 就目前而言，如果请求失败（例如，图像没有通过 AJAX 成功加载），代码将不会做任何事情。有关如何处理这种情况，请参阅 $.ajax 和错误回调的 jQuery 文档。
  • 上面代码片段的编写方式，只会加载一张图片。为了快速加载您拥有的许多图像，您可以在 for 循环中包含 AJAX 请求并以这种方式加载图像。虽然这不是一个好的做法，所以我建议您考虑创建一个图像精灵，通过 AJAX 仅检索该图像精灵，然后使用 CSS 将较小的图像从较大的图像中裁剪出来。
于 2012-09-12T03:35:38.800 回答