在head標(biāo)簽中加入
創(chuàng)新互聯(lián)公司專注于憑祥網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供憑祥營銷型網(wǎng)站建設(shè),憑祥網(wǎng)站制作、憑祥網(wǎng)頁設(shè)計(jì)、憑祥網(wǎng)站官網(wǎng)定制、小程序制作服務(wù),打造憑祥網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供憑祥網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
script type="text/javascript" src=""/script
即可。
src中可以根據(jù)需要選擇不同版本的jquery。
jquery預(yù)加載的兩種方式說明如下:
1、通過寫函數(shù)進(jìn)行預(yù)加載
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('img/')[0].src = this; //循環(huán)加載傳進(jìn)來的圖片數(shù)組
});
}
調(diào)用方法:
preload([
'img/imageName.jpg', //圖片1
'img/anotherOne.jpg',//圖片2
'img/blahblahblah.jpg'//圖片3
]);
2、通過插件的方式預(yù)加載
//自定義函數(shù)preload,實(shí)現(xiàn)原理跟方法一差不多
$.fn.preload = function() {
this.each(function(){
$('img/')[0].src = this;
});
}
調(diào)用方法:
$(['img1.jpg','img2.jpg','img3.jpg']).preload();
jquery是等待頁面加載完數(shù)據(jù),以及頁面部分元素;js是頁面全部加載完成才執(zhí)行初始化加載,具體示例祥看本文
jquery和js初始化加載頁面的區(qū)別:
jquery:等待頁面加載完數(shù)據(jù),以及頁面部分元素(不包括圖片、視頻),
js:是頁面全部加載完成才執(zhí)行初始化加載。
1、jQuery
頁面加載初始化的方法有3種
,頁面在加載的時(shí)候都會(huì)執(zhí)行腳本,
第一種(比較常用):
代碼如下:
$.function(){
alert("第一種方法");
});
第二種:
復(fù)制代碼
代碼如下:
$(document).ready(function(){
alert("第二種方法");
});
第三種:
代碼如下:
jQuery(function($){
alert("第三種方法");
});
2、js初始化加載的方法
第一種:
代碼如下:
window.onload=function(){
alert("初始化加載");
};
第二種:
(winOnload
此方法名自定義)
代碼如下:
function
winOnload()
{
alert("初始化加載");
};
winOnload();
注意:
由于jquery使用$符號(hào),和有些組件例如dwr就有沖突,為了解決這個(gè)問題,可以使用
代碼如下:
var
ace=jQuery.noConflict();
目前jquery 已經(jīng)達(dá)到了上百K。min壓縮版本也很大
所以下面說一下如何 提高 jquery在網(wǎng)站的加載速度:
1 使用合適的版本,不一定最新的jquery庫就最適合你的網(wǎng)站。可能你的js代碼,可能只需要一個(gè)1.6版本的Jquery。但是卻引用了一個(gè)1.8版本的jquery。無意中體積增加了幾十K.
2 發(fā)布網(wǎng)站之后,使用 min版本。
如圖 壓縮版本和未壓縮版本,體積差了180K。
3 如果網(wǎng)站帶寬比較緊張或是所在機(jī)房不是全網(wǎng)機(jī)房??梢允褂胘query CDN加速。
讓CDN加速給客戶端瀏覽器下載jquery,可以減少不少帶寬。
CND jquery 網(wǎng)址:(直接在jquery 官網(wǎng),download頁面即可)
JQ官網(wǎng)提供CND加速,google,microsoft 也提供。
請(qǐng)通過chrome的調(diào)試器,查看各個(gè)CDN的加載時(shí)間,綜合選擇適合自己網(wǎng)址的Jquery加速服務(wù)
1和2是一樣的,2是1的簡化寫法。
頁面加載就是頁面的整體Dom結(jié)構(gòu)都已加載到內(nèi)存。對(duì)于jquery而言,還包括jquery自身的內(nèi)部對(duì)象都已準(zhǔn)備完畢,所以與window.onload還是有所區(qū)別的,但大致意思都差不多。
依賴 (dependence)
Zepto 或者 jQuery 1.7以上版本,推薦jQuery 2.x版本(二者不要同時(shí)引用)?
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!');????????????????//?即使加載出錯(cuò),也得重置????????????????me.resetload();????????????}????????});????}});
(注明:所有示例里ajax和setTimeout都是為了模擬加載效果而寫的,與本插件無直接關(guān)系。ajax建議自己寫,無特殊情況不必copy我的ajax寫法,因?yàn)閷懙锰珷€。如需下載本地運(yùn)行,請(qǐng)?jiān)诒緳C(jī)裝服務(wù)器環(huán)境,否則ajax會(huì)報(bào)錯(cuò)。)
參數(shù)列表 (options)
參數(shù)
說明
默認(rèn)值
可填值
scrollArea ? ?滑動(dòng)區(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 ? ?自動(dòng)加載 ? ?true ? ?true和false ?
distance ? ?拉動(dòng)距離 ? ?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() 手動(dòng)加載
已知問題
由于部分Android中UC和QQ瀏覽器頭部有地址欄,并且一開始滑動(dòng)頁面隱藏地址欄時(shí),無法觸發(fā)scroll和resize,所以會(huì)導(dǎo)致部分情況無法使用。解決方案1:增加distance距離,例如DEMO2中distance:50;解決方案2:加meta使之全屏顯示
12
meta?name="full-screen"?content="yes"meta?name="x5-fullscreen"?content="true"
閱讀更多?登錄后自動(dòng)展開
分享名稱:加載jquery,加載不出來的假圖片
轉(zhuǎn)載注明:http://m.rwnh.cn/article48/phjehp.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、App設(shè)計(jì)、ChatGPT、域名注冊(cè)、靜態(tài)網(wǎng)站、商城網(wǎng)站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)