如何加载jquery

在head标签中加入

创新互联公司专注于凭祥网站建设服务及定制，我们拥有丰富的企业做网站经验。 热诚为您提供凭祥营销型网站建设，凭祥网站制作、凭祥网页设计、凭祥网站官网定制、小程序制作服务，打造凭祥网络公司原创品牌,更为您提供凭祥网站排名全网营销落地服务。

script type="text/javascript" src=""/script

即可。

src中可以根据需要选择不同版本的jquery。

jquery预加载的几种方式

jquery预加载的两种方式说明如下：

1、通过写函数进行预加载

function preload(arrayOfImages) {

$(arrayOfImages).each(function(){

$('img/')[0].src = this; //循环加载传进来的图片数组

});

}

调用方法：

preload([

'img/imageName.jpg', //图片1

'img/anotherOne.jpg',//图片2

'img/blahblahblah.jpg'//图片3

]);

2、通过插件的方式预加载

//自定义函数preload，实现原理跟方法一差不多

$.fn.preload = function() {

this.each(function(){

$('img/')[0].src = this;

});

}

调用方法：

$(['img1.jpg','img2.jpg','img3.jpg']).preload();

jquery跟js初始化加载的多种方法及区别介绍

jquery是等待页面加载完数据，以及页面部分元素；js是页面全部加载完成才执行初始化加载，具体示例祥看本文

jquery和js初始化加载页面的区别：

jquery：等待页面加载完数据，以及页面部分元素（不包括图片、视频），

js：是页面全部加载完成才执行初始化加载。

1、jQuery

页面加载初始化的方法有3种

，页面在加载的时候都会执行脚本,

第一种(比较常用)：

代码如下:

$.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 已经达到了上百K。min压缩版本也很大

所以下面说一下如何 提高 jquery在网站的加载速度：

1 使用合适的版本，不一定最新的jquery库就最适合你的网站。可能你的js代码，可能只需要一个1.6版本的Jquery。但是却引用了一个1.8版本的jquery。无意中体积增加了几十K.

2 发布网站之后，使用 min版本。

如图 压缩版本和未压缩版本，体积差了180K。

3 如果网站带宽比较紧张或是所在机房不是全网机房。可以使用jquery CDN加速。

让CDN加速给客户端浏览器下载jquery，可以减少不少带宽。

CND jquery 网址：（直接在jquery 官网，download页面即可）

JQ官网提供CND加速，google，microsoft 也提供。

请通过chrome的调试器，查看各个CDN的加载时间，综合选择适合自己网址的Jquery加速服务

Jquery的加载问题

1和2是一样的，2是1的简化写法。

页面加载就是页面的整体Dom结构都已加载到内存。对于jquery而言，还包括jquery自身的内部对象都已准备完毕，所以与window.onload还是有所区别的，但大致意思都差不多。

电脑打开,出现，请“加载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);                // 每次数据加载完，必须重置                me.resetload();            },            error: function(xhr, type){                alert('Ajax error!');                // 即使加载出错，也得重置                me.resetload();            }        });    }});

（注明：所有示例里ajax和setTimeout都是为了模拟加载效果而写的，与本插件无直接关系。ajax建议自己写，无特殊情况不必copy我的ajax写法，因为写得太烂。如需下载本地运行，请在本机装服务器环境，否则ajax会报错。）

参数列表 (options)

参数

说明

默认值

可填值

scrollArea    滑动区域    绑定元素自身    window  

domUp    上方DOM    {

domClass : 'dropload-up',

domRefresh : 'div class="dropload-refresh"↓下拉刷新/div',

domUpdate  : 'div class="dropload-update"↑释放更新/div',

domLoad : 'div class="dropload-load"○加载中.../div'

}    数组  

domDown    下方DOM    {

domClass : 'dropload-down',

domRefresh : 'div class="dropload-refresh"↑上拉加载更多/div',

domLoad : 'div class="dropload-load"○加载中.../div',

domNoData : 'div class="dropload-noData"暂无数据/div'

}    数组  

autoLoad    自动加载    true    true和false  

distance    拉动距离    50    数字  

threshold    提前加载距离    加载区高度2/3    正整数  

loadUpFn    上方function    空    function(me){

//你的代码

me.resetload();

}  

loadDownFn    下方function    空    function(me){

//你的代码

me.resetload();

}  

API

暴露一些功能，可以让dropload更灵活的使用

lock() 锁定dropload

参数

说明

lock()    智能锁定，锁定上一次加载的方向  

lock('up')    锁定上方  

lock('down')    锁定下方  

unlock() 解锁dropload

noData() 无数据

参数

说明

noData()    无数据  

noData(true)    无数据  

noData(false)    有数据  

resetload() 重置。每次数据加载完，必须重置

dropReload() 手动加载

已知问题

由于部分Android中UC和QQ浏览器头部有地址栏，并且一开始滑动页面隐藏地址栏时，无法触发scroll和resize，所以会导致部分情况无法使用。解决方案1：增加distance距离，例如DEMO2中distance:50；解决方案2：加meta使之全屏显示

12

meta name="full-screen" content="yes"meta name="x5-fullscreen" content="true"

阅读更多 登录后自动展开