教学 ♥ 用 Jquery Lazy Loading 代替普通 loading 页面
12 April 2012 @ 9:56 PM


转帖请留言和附上链接 ♥






Jquery Lazy Loading 介绍

简单来说就是 , 这样的东西 :



普通的 loading 页面是整个白色的 .

使用了这个过后 , 

visitors 可以看到你部落格 loading 的 percentage .

而且在 loading 期间 ,

visitors 是进不了你的部落格的

直到所有东西 load 完了

visitors 才可以看到你的部落格内容 .

注意 : Preview 不一定看得到效果 (:







Blogskin


步骤一

Template - Edit Html


步骤二

用 ctrl +f 找 :

</head>

* 然后代码 1 放在它上面 *


步骤三

代码 1 :
<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>


步骤四

用 ctrl + f 找 :

</body>

* 然后代码 2 放在它上面 *


步骤五

代码 2 :
<script>
 QueryLoader.selectorPreload = "body";
 QueryLoader.init();
</script>


步骤六

用 ctrl + f 找 :

</style>

* 然后代码 3 放在它的上面 *


步骤七

代码 3 :
.QOverlay {
  background-color: #000000;
  z-index: 9999;
}
.QLoader {
  background-color: #CCCCCC;
  height: 1px;
}
.QAmt {
  color:#FF530D;
  font-size:50px;
  font-weight:bold;
  line-height:50px;
  height:50px;
  width:100px;
   margin:-60px 0 0 -50px;
}


步骤八

保存 Save .


解释 :

黄色 highlight 的是屏幕覆盖的整体背景颜色 .

青色 highlight 的是 loading bar 的颜色 .

蓝色 highlight 的是 loading 百分比的字体颜色 .







Blogger Template


步骤一

Design - Edit Html


步骤二

用 ctrl + f 找 :

</head>

* 然后代码 1 放在它上面 *


步骤三

代码 1 :
<script src='http://code.jquery.com/jquery-1.5.min.js' type='text/javascript'/>
<script src='http://blogger-loader.googlecode.com/files/queryLoaderpre.js' type='text/javascript'/>


步骤四

用 ctrl + f 找 :

</body>

* 然后代码 2 放在它上面 *


步骤五

代码 2 :
<script>
 QueryLoader.selectorPreload = "body";
 QueryLoader.init();
</script>


步骤六

用 ctrl + f 找 :

]]></b:skin>

* 然后代码 3 放在它的上面 *


步骤七

代码 3 :
.QOverlay {
  background-color: #000000;
  z-index: 9999;
}
.QLoader {
  background-color: #CCCCCC;
  height: 1px;
}
.QAmt {
  color:#FF530D;
  font-size:50px;
  font-weight:bold;
  line-height:50px;
  height:50px;
  width:100px;
   margin:-60px 0 0 -50px;
}


步骤八

保存 Save .


解释 :

黄色 highlight 的是屏幕覆盖的整体背景颜色 .

青色 highlight 的是 loading bar 的颜色 .

蓝色 highlight 的是 loading 百分比的字体颜色 .







任何疑问请在 tagboard 留言 .

在评论箱留言请告诉我 (:




版权所有 翻印必究. ♥