blocks|key|1472724|text|实际上很简单。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1472725|发出一个AJAX请求并显示一个加载器。|1472726|将响应放在一个隐藏元素中，并使用JQuery将其淡入。|1472727|$("#id").fadeIn();|code-block|syntax|javascript|1472728|它一定会感觉很流畅！！|1472729|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Q|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|R|8|@]|9|@]|A|$I|J]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Simple actually. 
Make an AJAX request and show a loader. 
Put the response in a hidden element and fade it in using JQuery.

<pre><code>$("#id").fadeIn();
</code></pre>

It will definitely feel smooth!!

blocks|key|3197471|text|Ajax+%2B+Jquery是我的赌注。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3197472|加载页面的底部。然后执行Ajax调用以检索数据和带有转换的Jquery+(？)使GUI更新不那么笨拙。|3197473|微软有一些开箱即用的新东西，如果你在他们的堆栈上，他们称之为Single+page+application。|offset|length|3197474|entityMap|0|LINK|mutability|MUTABLE|url|http://www.asp.net/single-page-application^0|0|0|U|N|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|R|8|@]|9|@$F|S|G|T|1|U]]|A|$]]|$1|H|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]]]

Ajax + Jquery is my bet. 
Load the base of the page. Then do Ajax calls to retrieve data and Jquery with transitions(?) to make the GUI update less clunky.

Microsoft has something fresh out of the box they call <a href="http://www.asp.net/single-page-application" rel="nofollow">Single page application</a> if you are on their stack.

blocks|key|3197514|text|如果您不能完成这样的任务:使用Ajax转到页面内容，使用html5在单击某个内容时更改网址，您可以让页面快速淡出，然后转到网址(而不是使用链接，使用JavaScript函数淡出所有内容，然后更改window.location)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3197515|当一个页面被加载时，你可以再次快速淡入。它会给你一种类似于谷歌的过渡感觉，并且你将避免“白色闪光”。|3197516|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

If you're not up to the task of using Ajax to get to page content and html5 to change the URL when something is clicked, you can have the page fade out quickly and then go to the URL (instead of using links use a JavaScript function to fade everything out and then change the window.location)

When a page is loaded you can just fade in quickly again. It will give your transition a similar feel to that of google and you will avoid the "white flash"

blocks|key|1472654|text|有多种方法可以实现此效果，但一个相当简单的方法是使用jQuery+(http://jquery.com/)和jQuery+UI选项卡插件(http://jqueryui.com/demos/tabs/)。看一下该页面上文档的ajax模式部分。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1472655|如果您使用的是ASP.NET+Web+Forms，您还可以选择使用UpdatePanel+(Introduction+to+the+UpdatePanel+control)。|1472656|entityMap|0|LINK|mutability|MUTABLE|url|http://jquery.com/|1|http://jqueryui.com/demos/tabs/|2|http://msdn.microsoft.com/en-us/library/bb399001.aspx^0|Y|I|0|1X|V|1|0|1A|13|2|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@$A|S|B|T|1|U]|$A|V|B|W|1|X]]|C|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@$A|Z|B|10|1|11]]|C|$]]|$1|F|3|-4|5|6|7|12|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]]]

There are multiple ways to achieve this effect, but a fairly easy one is to use jQuery (<a href="http://jquery.com/" rel="nofollow">http://jquery.com/</a>) and the jQuery UI tabs plugin (<a href="http://jqueryui.com/demos/tabs/" rel="nofollow">http://jqueryui.com/demos/tabs/</a>). Take a look at the ajax mode part of the documentation on that page.

If you're using ASP.NET Web Forms, you also have the option of using an UpdatePanel (<a href="http://msdn.microsoft.com/en-us/library/bb399001.aspx" rel="nofollow">Introduction to the UpdatePanel control</a>).

blocks|key|3197581|text|我相信像Facebook这样的网站，我猜这就是你所指的那种网站，使用iFrames加载内容，然后获取内容并将其传输到另一个元素。这意味着它们不会不断地重新加载左侧菜单、页眉或页脚，任何聊天记录都会一直显示出来。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3197582|我个人刚刚开发了一个表格，它可以在你向下滚动时加载额外的行(类似于Facebook的新闻提要，尽管我怀疑它们使用的是表格)。我只是将新行加载到一个隐藏表中，一次加载30行，然后将这些行转移到原始表中。这是一个类似于上面的原则。|3197583|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

I believe sites like Facebook, which I guess is the kind of site you're referring to, use iFrames to load the content and then get the content and transfer it to another element. This means they don't constantly reload the left menu, header or footer and any chats you have up stay showing.

I personally have just developed a table which loads extra rows as you scroll down (similar to Facebooks news feed, although I doubt they use a table). I just load the new rows into a hidden table, 30 rows at a time, and transfer the rows into the original table. Its a similar principle to the above.

blocks|key|1788862|text|正如Anirudh+Rayabharam所说，使用jquery很容易将您想要加载动画的元素作为目标。您只需向希望在加载时滑入页面的所有内容添加一个类，并使用$('.load-animation').slideDown(200);确定这些元素的目标|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|1788863|您可以使用以下代码确保动画在加载时启动：document.onload+=+function()+{+++++++++$('.load-animation').slideDown(200);+++++}|1788864|entityMap^0|26|10|0|K|29|0^^$0|@$1|2|3|4|5|6|7|J|8|@$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|H|3|-4|5|6|7|P|8|@]|D|@]|E|$]]]|I|$]]

As Anirudh Rayabharam said, it is easy to target the elements that you want to load in with animations with jquery. You could just add a class to all the things that you want to slide into the page onload and target those elements using 
<code>
 $('.load-animation').slideDown(200);
</code> 
You could make sure that the animation starts onload using this code:<code>
 document.onload = function() {
 $('.load-animation').slideDown(200);
 }</code>

I'm unsure how to refer to this (so I can't search for it by myself), but how does one achieve a smooth page loading (similar to a content prefetching) like when you click on a code page link in github or when you click on another element of the Google plus sidebar?

I mean: I think it's something with javascript and ajax but I can't figure it out, the page loads smoothly without the "refreshing" feeling, and it's surely not flash.

I'm sorry if I'm being unclear, I'll try to explain it better if this doesn't work

Smooth content loading, how to do it?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我不确定如何引用它(所以我不能自己搜索它)，但是当你点击github中的代码页链接或点击Google plus侧边栏的另一个元素时，如何实现平滑的页面加载(类似于内容预取)？我的意思是:我认为这是javascript和ajax的东西，但我搞不懂，页面加载很流畅，没有“刷新”的感觉，而且肯定不是flash。如果我说得不清楚，我很抱歉，如果这个不起作用，我会试着解释得更清楚

问流畅的内容加载，怎么做呢？
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问流畅的内容加载，怎么做呢？EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问流畅的内容加载，怎么做呢？
EN