$(document).on('pageinit',function() {
var mySwiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
要使用$(function(){
var mySwiper = new Swiper('.swiper-container',{
pagination : '.swiper-pagination',
grabCursor: true,
paginationClickable: true,
mousewheelControl:true,//鼠标滚轮
autoplayDisableOnInteraction:false,
autoplay:10000,
speed:800,
mode: 'horizontal',/*纵向滚动*/
});
});
JqueryMobile的“$(document).on('pageinit',function() {” 和 “$(function(){”有什么不同???
JqueryMobile的“$(document).on('pageinit',function() {” 是第一次加载执行。
$(function(){是什么时候执行??? 为什么用这个方法“swiper”可以正常翻转???
4 个解决方案
#1
$(function(){...}
在页面加载完成(即 window.load 事件发生)时执行
所以所有 jq 的预处理代码都应放在他里面
如果放在外面,则可能因为 jq 未加载完毕而失败
在页面加载完成(即 window.load 事件发生)时执行
所以所有 jq 的预处理代码都应放在他里面
如果放在外面,则可能因为 jq 未加载完毕而失败
#2
swiper没用过,推测应该是发生pageinit事件时swiper中的一些图片什么的还没有加载出来,因为两个事件是有先后顺序的。
pageinit是当页面已经初始化并且完成增强时触发。
$(function(){})是jquery ready() 方法的简写,完整是$(document).ready(function(){});,当然$(document).on('ready',function(){});这样写也可以。
ready是当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
看下面例子比较直观
pageinit是当页面已经初始化并且完成增强时触发。
$(function(){})是jquery ready() 方法的简写,完整是$(document).ready(function(){});,当然$(document).on('ready',function(){});这样写也可以。
ready是当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
看下面例子比较直观
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).on('ready',function(){
alert("ready");//这时图片已经显示了
});
$(document).on('pageinit',function(){
alert("pageinit");//不要点确定,很明显图片还没显示
});
</script>
</head>
<body>
<img src="http://static.csdn.net/public/common/toolbar/images/f_icon.png" />
</body>
</html>
#3
拜上,谢谢各位大神。
#4
在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。要附加一个事件,只运行一次,然后删除自己, 请参阅.one()
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。要附加一个事件,只运行一次,然后删除自己, 请参阅.one()
#1
$(function(){...}
在页面加载完成(即 window.load 事件发生)时执行
所以所有 jq 的预处理代码都应放在他里面
如果放在外面,则可能因为 jq 未加载完毕而失败
在页面加载完成(即 window.load 事件发生)时执行
所以所有 jq 的预处理代码都应放在他里面
如果放在外面,则可能因为 jq 未加载完毕而失败
#2
swiper没用过,推测应该是发生pageinit事件时swiper中的一些图片什么的还没有加载出来,因为两个事件是有先后顺序的。
pageinit是当页面已经初始化并且完成增强时触发。
$(function(){})是jquery ready() 方法的简写,完整是$(document).ready(function(){});,当然$(document).on('ready',function(){});这样写也可以。
ready是当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
看下面例子比较直观
pageinit是当页面已经初始化并且完成增强时触发。
$(function(){})是jquery ready() 方法的简写,完整是$(document).ready(function(){});,当然$(document).on('ready',function(){});这样写也可以。
ready是当 DOM(文档对象模型) 已经加载,并且页面(包括图像)已经完全呈现时,会发生 ready 事件。
看下面例子比较直观
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script>
$(document).on('ready',function(){
alert("ready");//这时图片已经显示了
});
$(document).on('pageinit',function(){
alert("pageinit");//不要点确定,很明显图片还没显示
});
</script>
</head>
<body>
<img src="http://static.csdn.net/public/common/toolbar/images/f_icon.png" />
</body>
</html>
#3
拜上,谢谢各位大神。
#4
在选择元素上绑定一个或多个事件的事件处理函数。
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。要附加一个事件,只运行一次,然后删除自己, 请参阅.one()
on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中,.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换,see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件,请参阅.off()。要附加一个事件,只运行一次,然后删除自己, 请参阅.one()