利用jQuery改变网页元素加载顺序

/ 24评 / 0

  在上一篇介绍副标题处显示嘀咕消息的文章中,我是把嘀咕的js放在header.php中,这是一个常规的方法,简单方便易实现,但这方法也存在一个很大的弊端,因为网页是按从上到下的顺序进行加载,引用了一段外部js在头部后,自己博客首页打开速度就会受到影响,还有就是在外部js失效后,博客首页也就会卡在那打不开了,极大的降低了访客体验度,有没有其他方法可以解决呢?

  我首先想到的方法就是把嘀咕的代码单独保存为一个php文件,加载到index.php的底部中,再利用css的绝对定位absolute把其定位到博客副标题处来显示,用top和left调整好位置后,在我笔记本屏幕上显示没有问题,但换到其他分辨率下,错位问题也就随之而来了, 具体原因请看absolute的定位原理:

元素框从文档流完全删除,并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。

所以,这个方法被否决了,Google之后,我发现了另外的一个方法,就是本文标题所述的内容:利用jQuery改变网页元素加载顺序,下面就以副标题处显示嘀咕消息为例来介绍如何利用jQuery来改变网页元素的加载顺序。

  首先,在header.php里添加一个id为digu的空白div,例如:

<div id="digu">
</div>

接着,到index.php的<?php get_footer(); ?>下面再添加一个id为digux的div,在里面加载之前独立保存出来的digu.php,写出来大概是这个样子:

<div id="digux">
<?php include_once("digu.php"); ?>
</div>

再在下面加入本文最核心的jQ代码:

<script type="text/javascript">
$('#digu').html($('#digux').html());
</script>
>

也可以写成:

<script type="text/javascript">
$('#digux').children().clone().appendTo('#digu');
</script>

这段代码基本意思就是把id为digux的内容复制到digu之中,这样我们就成功的利用jQuery改变了副标题处嘀咕消息的加载顺序,因为header.php中的digu是空白层,真正的内容是在index.php的digux之中,所以,浏览器最后加载的是digux层,这样就不会因为外部引用的js导致博客打开缓慢或打开不完全了。

  忘了说,实现以上效果我们还需在footer.php里加载jQuery框架以及定义digux的CSS为display:none,这就不做过多说明了,之前的文中有过介绍。

  这篇文章旨在抛砖引玉,此方法适用的范围很大,大家可以尽情发掘使用。作为一个初识jQuery的人来说,我已经被jQuery的强大征服了。

  文中jQ代码参考自http://leeiio.me/jquery-changes-divsorder/

24条回应:“利用jQuery改变网页元素加载顺序”

  1. Auston Jary说道:

    技术文~
    不懂

  2. 万戈说道:

    JQuery是牛人玩的技术,我直接飘过了~

  3. Mars说道:

    写的很不错。。。

  4. SorryDreams说道:

    blog.leo-n.cn请记得写一篇测评。

  5. 三七八蛋说道:

    利用JQ在最后加载?
    不错。

  6. 吖Bee说道:

    高科技..不太懂哈!

  7. 林木木说道:

    很好的一个想法,给小站也加上去~

  8. bolo说道:

    可以改装成加载完页面后才加载文章图片

  9. 阿修说道:

    哦,不错。我就是看看

  10. Nox说道:

    成功了,但是有个致命的问题,嘀咕的消息不在副标题处显示了,跑到底部了。有点郁闷,貌似完全没起作用,起作用的是这里,但是段代码,按照你文中所说的,放到footer下面,那嘀咕的消息就在底部显示。不在副标题处显示,另外你所说的digu.php页面里,就是把无敌秀给的代码放进去么?

  11. Nox说道:

    郁闷,评论看见不输入的代码。在来一遍,简单点说明问题。
    嘀咕的消息不在副标题处显示了,跑到底部了。有点郁闷,貌似id为digu的空白div完全没起作用,起作用的是id为digux,里面加载嘀咕phpw文件的div,但是这段代码,按照你文中所说的,放到footer下面,那嘀咕的消息就在底部显示。不在副标题处显示,另外你所说的digu.php页面里,就是把无敌秀给的代码放进去么?

    • Leo.N说道:

      @Nox 对,是把无敌秀的代码放进digu.php里面去,id为digu的没起作用而是digux起作用?加载jq库没?jq库一定要在复制digux到digu的js之前加载。。

  12. Nox说道:

    嗯,我还在研究中,不是很懂,能加我QQ吗? 991918018

  13. nikeforce说道:

    你这个方法还真不错呢!

发表评论

电子邮件地址不会被公开。 必填项已用*标注