建站
咨詢
售后
建站咨詢
新聞中心
如何加載jquery
在head標簽中加入
創(chuàng)新互聯(lián)公司專注于憑祥網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供憑祥營銷型網(wǎng)站建設，憑祥網(wǎng)站制作、憑祥網(wǎng)頁設計、憑祥網(wǎng)站官網(wǎng)定制、小程序制作服務，打造憑祥網(wǎng)絡公司原創(chuàng)品牌,更為您提供憑祥網(wǎng)站排名全網(wǎng)營銷落地服務。
script type="text/javascript" src=""/script
即可。
src中可以根據(jù)需要選擇不同版本的jquery。
jquery預加載的幾種方式
jquery預加載的兩種方式說明如下：
1、通過寫函數(shù)進行預加載
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('img/')[0].src = this; //循環(huán)加載傳進來的圖片數(shù)組
});
}
調用方法：
preload([
'img/imageName.jpg', //圖片1
'img/anotherOne.jpg',//圖片2
'img/blahblahblah.jpg'//圖片3
]);
2、通過插件的方式預加載
//自定義函數(shù)preload，實現(xiàn)原理跟方法一差不多
$.fn.preload = function() {
this.each(function(){
$('img/')[0].src = this;
});
}
調用方法：
$(['img1.jpg','img2.jpg','img3.jpg']).preload();
jquery跟js初始化加載的多種方法及區(qū)別介紹
jquery是等待頁面加載完數(shù)據(jù)，以及頁面部分元素；js是頁面全部加載完成才執(zhí)行初始化加載，具體示例祥看本文
jquery和js初始化加載頁面的區(qū)別：
jquery：等待頁面加載完數(shù)據(jù)，以及頁面部分元素（不包括圖片、視頻），
js：是頁面全部加載完成才執(zhí)行初始化加載。
1、jQuery
頁面加載初始化的方法有3種
，頁面在加載的時候都會執(zhí)行腳本,
第一種(比較常用)：
代碼如下:
$.function(){
alert("第一種方法");
});
第二種：
復制代碼
代碼如下:
$(document).ready(function(){
alert("第二種方法");
});
第三種：
代碼如下:
jQuery(function($){
alert("第三種方法");
});
2、js初始化加載的方法
第一種：
代碼如下:
window.onload=function(){
alert("初始化加載");
};
第二種：
(winOnload
此方法名自定義)
代碼如下:
function
winOnload()
{
alert("初始化加載");
};
winOnload();
注意：
由于jquery使用$符號，和有些組件例如dwr就有沖突，為了解決這個問題，可以使用
代碼如下:
var
ace=jQuery.noConflict();
如何提高Jquery加載速度
目前jquery 已經(jīng)達到了上百K。min壓縮版本也很大
所以下面說一下如何 提高 jquery在網(wǎng)站的加載速度：
1 使用合適的版本，不一定最新的jquery庫就最適合你的網(wǎng)站?？赡苣愕膉s代碼，可能只需要一個1.6版本的Jquery。但是卻引用了一個1.8版本的jquery。無意中體積增加了幾十K.
2 發(fā)布網(wǎng)站之后，使用 min版本。
如圖 壓縮版本和未壓縮版本，體積差了180K。
3 如果網(wǎng)站帶寬比較緊張或是所在機房不是全網(wǎng)機房。可以使用jquery CDN加速。
讓CDN加速給客戶端瀏覽器下載jquery，可以減少不少帶寬。
CND jquery 網(wǎng)址：（直接在jquery 官網(wǎng)，download頁面即可）
JQ官網(wǎng)提供CND加速，google，microsoft 也提供。
請通過chrome的調試器，查看各個CDN的加載時間，綜合選擇適合自己網(wǎng)址的Jquery加速服務
Jquery的加載問題
1和2是一樣的，2是1的簡化寫法。
頁面加載就是頁面的整體Dom結構都已加載到內(nèi)存。對于jquery而言，還包括jquery自身的內(nèi)部對象都已準備完畢，所以與window.onload還是有所區(qū)別的，但大致意思都差不多。
電腦打開,出現(xiàn)，請“加載jQuery/Zepto庫”，代表什么意思？
依賴 (dependence)
Zepto 或者 jQuery 1.7以上版本，推薦jQuery 2.x版本（二者不要同時引用）?
Zepto or jQuery 1.7+，recommend to use jQuery 2.x（not use them at the same time）
使用方法 (usage)
引用css和js
(basic)
12
link?rel="stylesheet"?href="../dist/dropload.css"script?src="../dist/dropload.min.js"/script
1234567891011121314151617181920
$('.element').dropload({????scrollArea?:?window,????loadDownFn?:?function(me){????????$.ajax({????????????type:?'GET',????????????url:?'json/more.json',????????????dataType:?'json',????????????success:?function(data){????????????????alert(data);????????????????//?每次數(shù)據(jù)加載完，必須重置????????????????me.resetload();????????????},????????????error:?function(xhr,?type){????????????????alert('Ajax?error!');????????????????//?即使加載出錯，也得重置????????????????me.resetload();????????????}????????});????}});
（注明：所有示例里ajax和setTimeout都是為了模擬加載效果而寫的，與本插件無直接關系。ajax建議自己寫，無特殊情況不必copy我的ajax寫法，因為寫得太爛。如需下載本地運行，請在本機裝服務器環(huán)境，否則ajax會報錯。）
參數(shù)列表 (options)
參數(shù)
說明
默認值
可填值
scrollArea ? ?滑動區(qū)域 ? ?綁定元素自身 ? ?window ?
domUp ? ?上方DOM ? ?{
domClass : 'dropload-up',
domRefresh : 'div class="dropload-refresh"↓下拉刷新/div',
domUpdate ?: 'div class="dropload-update"↑釋放更新/div',
domLoad : 'div class="dropload-load"○加載中.../div'
} ? ?數(shù)組 ?
domDown ? ?下方DOM ? ?{
domClass : 'dropload-down',
domRefresh : 'div class="dropload-refresh"↑上拉加載更多/div',
domLoad : 'div class="dropload-load"○加載中.../div',
domNoData : 'div class="dropload-noData"暫無數(shù)據(jù)/div'
} ? ?數(shù)組 ?
autoLoad ? ?自動加載 ? ?true ? ?true和false ?
distance ? ?拉動距離 ? ?50 ? ?數(shù)字 ?
threshold ? ?提前加載距離 ? ?加載區(qū)高度2/3 ? ?正整數(shù) ?
loadUpFn ? ?上方function ? ?空 ? ?function(me){
//你的代碼
me.resetload();
} ?
loadDownFn ? ?下方function ? ?空 ? ?function(me){
//你的代碼
me.resetload();
} ?
API
暴露一些功能，可以讓dropload更靈活的使用
lock() 鎖定dropload
參數(shù)
說明
lock() ? ?智能鎖定，鎖定上一次加載的方向 ?
lock('up') ? ?鎖定上方 ?
lock('down') ? ?鎖定下方 ?
unlock() 解鎖dropload
noData() 無數(shù)據(jù)
參數(shù)
說明
noData() ? ?無數(shù)據(jù) ?
noData(true) ? ?無數(shù)據(jù) ?
noData(false) ? ?有數(shù)據(jù) ?
resetload() 重置。每次數(shù)據(jù)加載完，必須重置
dropReload() 手動加載
已知問題
由于部分Android中UC和QQ瀏覽器頭部有地址欄，并且一開始滑動頁面隱藏地址欄時，無法觸發(fā)scroll和resize，所以會導致部分情況無法使用。解決方案1：增加distance距離，例如DEMO2中distance:50；解決方案2：加meta使之全屏顯示
12
meta?name="full-screen"?content="yes"meta?name="x5-fullscreen"?content="true"
閱讀更多?登錄后自動展開
名稱欄目：加載jquery,加載不出來的假圖片
文章起源：http://fisionsoft.com.cn/article/phjehp.html
