论坛首页>
欢迎您:游客| 登录| 注册 高级搜索
总贴数:2

巧妙解决页面加载慢的问题

查看:527回复:2

jfkj****0921
军衔:
列兵
经验:0/50
发帖:
0/2
精华数/发帖数

  很多内容管理系统、论坛系统都提供了js内容调用的功能。其实,采取js的方式来调用内容是最不科学的一种方法,不但影响SEO,而且会导致页面加载的时候有“卡”的现象。虽然如此,但很多时候却不得不用这种方法。于是,只好想办法解决这个“卡”的问题了。

  一、现象分析

  先举个例子来说明一下现象。例如:铁路门户网的首页为了显示论坛的内容,就采取了js调用的方式。由于论坛采用的是dvbbs的程序,这个程序在后台就提供了js首页调用的功能。在论坛后台设置好调用后,就可以把生成的js调用代码插入到网站的首页相应位置。铁路门户网目前的首页一共有三处采取了js调用的方式调用了论坛的内容。分别为:招聘信息、铁路论文、铁路资料三个区域。由于首页是静态生成的,加载起来还算比较快。但是在浏览的时候还是发现,每当页面加载到上述三个区域的时候,网页就会“卡”一下,有时候在网站系统繁忙的时候甚至会卡住不动,导致后面的静态内容显示不出来,比较影响用户体验。

  二、解决方案

  那么,如何解决这个问题呢?当然最直接的办法是不用js调用,改用别的方式,但这样一来,需要修改大量的程序。退其次,能否让页面的静态内容先加载完,再来处理这些js调用呢?这样的话,起码不会因为个别的js调用加载缓慢而影响整个页面的加载。答案的肯定的。于是,这里先明确一下思路:让js调用最后加载。具体做法如下:

  1、在首页模板的最后面添加几个,样式设置为display:none。每个设置一个不同的id。如:

  2、将首页模板中js内容调用区域的调用语句全部移到网页的最后面刚才新添加的中。并将每个js内容调用区域的元素设置一个不同的id,这里假设设置id为“jsnews”,并在区域内写上“内容正在加载...”的字样。

  3、在页面尾部新增加的后面增加以下js语句:

  

  以上语句,根据js调用的数量增加多条。其中,getElementById的id名要与前面设置的id相对应。完工。

  三、原理说明

  经以上修改后,页面的前部分全部变成了静态内容。原先js调用的区域全部变成了“内容正在加载...”几个简单的汉字。因此,可以很顺利地加载,不会卡。只有等到页面加载至最后面添加的几个隐藏的时候,才可能会卡住,但这个时候,整个页面其他的内容都加载完毕了,因此即使卡住也影响不大。等中的js调用加载完毕后,最后面增加的js语句就会自动将中的内容复制到真正需要显示这些调用内容的区域,并替换掉“内容正在加载...”的字样。于是整个页面就加载完成了。

引用回复 2013-10-25 15:05:16 [1楼]
游客
军衔:
列兵
经验:0/50
发帖:
0/0
精华数/发帖数
Grazi for mainkg it nice and EZ.
引用回复 2014-08-19 05:09:06 [2楼]
总贴数:2

快速回复主题(游客可直接回复)

*内 容: 不超过10000字符
*验证码:
换个验证码  
 
 
 
  提交  同时按Ctrl+Enter可直接发表  

顶部