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

  在上一篇介绍副标题处显示嘀咕消息的文章中,我是把嘀咕的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/

评论

  1. 12年前
    2009-11-13 18:23:14

    技术文~
    不懂

    • Leo.N 博主
      12年前
      2009-11-13 21:38:17

      其实这也没多少技术在里面,我自认为是伪技术。。哈哈。

  2. 12年前
    2009-11-13 20:35:44

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

    • Leo.N 博主
      12年前
      2009-11-13 21:37:21

      我也只是能折腾下jQ里面最基本的东西。。。

      • 12年前
        2009-11-14 14:03:11

        你用的是嵌套,我想加入@悬浮的那个东西,请指教我一下,改如何添加呢

        • Leo.N 博主
          12年前
          2009-11-15 11:34:15

          你先修改comments.php,按照mg12的方法,然后再在里面加载commenttips.js就行了。。还有,前提是要加载jQ库。。。

  3. 12年前
    2009-11-13 20:45:57

    写的很不错。。。

    • Leo.N 博主
      12年前
      2009-11-13 21:35:42

      多谢,您的文章也很棒。

  4. 12年前
    2009-11-13 21:03:57

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

    • Leo.N 博主
      12年前
      2009-11-13 21:32:09

      好的~

  5. 12年前
    2009-11-13 21:18:45

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

    • Leo.N 博主
      12年前
      2009-11-13 21:34:26

      呵呵,希望对您有用。

  6. 12年前
    2009-11-14 16:09:38

    高科技..不太懂哈!

    • Leo.N 博主
      12年前
      2009-11-15 11:36:05

      我认为我是搞伪高科技的。。。。哈哈

  7. 12年前
    2009-11-14 23:03:10

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

    • Leo.N 博主
      12年前
      2009-11-15 11:39:38

      加去吧,对你来说这些改动不算麻烦。。哈哈

  8. 12年前
    2009-11-17 15:56:11

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

    • Leo.N 博主
      12年前
      2009-11-17 19:31:22

      好想法!

  9. 12年前
    2009-11-21 9:27:03

    哦,不错。我就是看看

  10. Nox
    12年前
    2009-12-21 17:32:31

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

  11. Nox
    12年前
    2009-12-21 17:35:48

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

    • Leo.N 博主
      12年前
      2009-12-21 18:21:40

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

  12. Nox
    12年前
    2009-12-21 18:23:00

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

  13. 11年前
    2010-9-25 9:13:19

    你这个方法还真不错呢!

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇