jquery顯示loading圖片直到網(wǎng)頁加載完成的方法
更新時間：2015年06月25日 12:27:27 作者：不吃皮蛋
這篇文章主要介紹了jquery顯示loading圖片直到網(wǎng)頁加載完成的方法,涉及jquery頁面加載與動畫效果的使用技巧,需要的朋友可以參考下
本文實例講述了jquery顯示loading圖片直到網(wǎng)頁加載完成的方法。分享給大家供大家參考。具體實現(xiàn)方法如下：
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset='UTF-8'>
<title>Simple Loader</title>
<style>
/* This only works with JavaScript,
if it's not present, don't show loader */
.no-js #loader { display: none; }
.js #loader { display: block; position: absolute; left: 100px; top: 0; }
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="https://github.com/Modernizr/Modernizr/raw/master/modernizr.js"></script>
<script>
// Wait for window load
$(window).load(function() {
// Animate loader off screen
$("#loader").animate({
top: -200
}, 1500);
});
</script>
</head>
<body>
<img src="download.png" id="loader">
<img src="http://farm6.static.flickr.com/5299/5400751421_55d49b2786_o.jpg">
</body>
</html>
希望本文所述對大家的jquery程序設(shè)計有所幫助。
相關(guān)文章
本篇文章是對jQuery中的排序組件進行了詳細的分析介紹，需要的朋友參考下2013-06-06
Javascript 鏈?zhǔn)秸{(diào)用實現(xiàn)代碼(參考jquery)
謂的鏈?zhǔn)秸{(diào)用無非是一個語法技巧而已，我就學(xué)Jquery寫了一個粗淺的庫。2010-05-05
Jquery Ajax學(xué)習(xí)實例6 向WebService發(fā)出請求，返回DataSet(XML) 異步調(diào)用
Jquery Ajax學(xué)習(xí)實例6 向WebService發(fā)出請求，返回DataSet(XML) 異步調(diào)用實現(xiàn)代碼，需要的朋友可以參考下。2010-03-03
這篇文章主要介紹了jQuery刪除節(jié)點的方法,結(jié)合實例形式分析了remove方法進行頁面元素刪除的相關(guān)使用技巧,需要的朋友可以參考下2016-09-09
本文主要給大家詳細介紹了jQuery過濾選擇器，包含基本過濾選擇器、內(nèi)容過濾選擇器、可見性過濾選擇器、屬性過濾選擇器、子元素過濾選擇器、表單對象屬性過濾選擇器等，十分全面,需要的朋友可以參考下2015-01-01
這個下拉菜單式可以循環(huán)的，且是使用jquery實現(xiàn)，很實用，大家可以學(xué)習(xí)下2014-09-09
jQuery.query.js 取參數(shù)的兩點問題分析
最近在項目中使用jQuery.query.js這個插件進行頁面間URL傳值，遇到如下兩點問題2012-08-08
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
基于jQuery+Cookie實現(xiàn)的防止刷新的在線考試倒計時
這篇文章主要介紹了基于jQuery+Cookie實現(xiàn)的防止刷新的在線考試倒計時的方法和示例，有需要的小伙伴可以參考下2015-06-06
這篇文章主要為大家詳細介紹了jquery插件實現(xiàn)搜索歷史，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04