如何先加载网站模板，内容晚点

这里是示例网站：https://www.mapbox.com/plans/或http://facebook.com/ 我很好奇他们如何使用模板只对网站进行预先视觉化，并稍后加载内容。我所能想象到的只是首先隐藏所有内容，并在加载完所有内容后显示它。这是正确的轨道？任何想法都会有所帮助，谢谢。如何先加载网站模板，内容晚点

mapbox-screenshot 这是您第一次看到您打开http://www.mapbox.com并看到内容后。 enter image description here 这就是我想知道的过渡。如果使用ajax，那么最初的菜单或文本怎么样？谢谢:)

来源

2014-11-04 yuhua

没有隐藏，只是阿贾克斯。 – Dylan 2014-11-04 06:30:37

我明白你在说什么。他们正在等待字体，并避免他们隐藏的小故障，直到js表示通过将类user-loaded放在body元素上准备就绪。

.show-in-loaded { opacity: 0; } 
.user-loaded .show-in-loaded { opacity: 1; }

然后什么都有字体，他们通过把show-in-loaded隐藏它。

在某些js函数中指示它们已准备就绪状态。

$('body').addClass('user-loaded');

来源

2014-11-04 07:03:20 Dylan

很酷！我遵循你的回答，并找出过渡的CSS和善意的评论。 :) /*加载前的面罩元素 ---------------------------------------- --------------- */ .show-in-loaded {opacity：0; } .user-loaded .show-in-loaded {opacity：1; } – yuhua 2014-11-04 07:10:49

我不积极，他们也有很多代码来阻止模仿等，但字体是我们看到这个的常见原因。 http://help.typekit.com/customer/portal/articles/6787-font-events这里的typekit版本。 – Dylan 2014-11-04 07:18:29

页面加载后加载的任何东西都必须是ajax调用。

当您从服务器发送数据时，数据将被渲染，并且样式将根据资源获取的速度完成。

当您从ajax调用请求数据时，会在页面加载后发送和处理数据，但是您也可以与页面加载同步，因为它是异步调用。

来源

2014-11-04 06:37:54

是的，所以包含文本的ajax？我的意思是在整个加载过程中，我只能看到一些像模板一样的颜色块，然后立即显示文本。也许我在屏幕截图上演示了这个过程 – yuhua 2014-11-04 06:39:49

也可以隐藏起来，等待字体显示出来。 – Dylan 2014-11-04 06:44:07

是的，你是对的，这可以是一个很好的方法来显示文字只有当所有的字体和图像正确加载 – 2014-11-04 07:04:15

如何先加载网站模板，内容晚点

回答

相关问题