从一个例子了解window.onload、$(function(){})、$(window).load(function(){})的加载顺序
最近遇到一个轮播需求:
1. ajax请求服务器,返回json,判断json数据里每一项中isFix属性是0还是1,0表示不轮播,1表示需要轮播。
2. 当isFix属性为0的时候,表示该图片不轮播,相反,isFix为1的时候,表示该图片需要轮播
3. 屏幕最多容纳6个图片,并且每个图片都有边距。不固定高度,自适应宽度。
4. 不轮播的图片固定在左边,轮播的图片需要在右边轮播,每次轮播的距离为一张图片的宽度和间距
5. 图片宽高不固定,反正一行最多6个。
6. 兼容IE8
我的思路是:
1. ajax请求的时候,分两次把轮播和不轮播的图片append到100%宽度的div中,
2. 从要轮播图片的第一张开始到最后一张,把这些图片append到100%减去不轮播图片所占据的宽度的div中
3. 最后再用margin-left来实现轮播效果。
实现的效果:
总共10个图片,请求到的数据是其中三个不轮播,剩下7个轮播,由于一行只能显示6个,所以显示的应该是3个在轮播。
在实现的过程中,我需要去获取装轮播图div的高度。而获取高度肯定需要在图片加载完才能正确获取到,所以我选择了在window.onload=function(){} 操作获取图片高度。
然而,遇到了如下的问题:
第一个问题:第一次运行程序时竟然不执行window.onload里面的内容???why???
产生原因:不管是外链js还是页面中的js,所有的window.onload=function(){}都只有一个且是最后一个生效,后面的会覆盖前面的。我其它js文件里有window.onload,而这个轮播的js文件要比另一个先引入,所以这个不执行。
解决办法:既然只能有一个window.onload,那么我换成$(window).load(function (){})不就行了吗?真机智。。。。。。
第二个问题:换成$(window).load(function (){})之后,在其它浏览器中能正确获取高度,而在火狐浏览器中,有时候能获取到高度,有时候却给我返回null。。。???这又是什么鬼
产生原因:返回null,说明并没有找到该元素。而ajax请求是异步,意思就是在请求成功之前,还能执行下面的代码。所以在ajax请求成功,把图片append到div中之前就已经执行到获取高度的js代码了。
解决办法:把ajax的async属性设置为false即同步请求数据。啊。。。。。。真个世界清静了。
为了防止ajax同步请求时不能执行下面的js,所以我把这个js文件放到最后,以免请求时间过长时,阻塞下面的js加载。。
总结:
1. window.onload=function(){}是等待所有的内容都加载完之后执行,比如图片,内容,js,css等。
2. $(function(){}),是等待DOM加载完之后执行(我的理解是标签绘制完毕之后),图片未加载完时也能执行。
3. $(function(){})是$(document).ready(function(){})的简写方式,功能是一样的。
4. $(window).load(function (){})也是等待所有的内容都加载完之后执行。
5. 不管是外链js还是页面中的js的window.onload都只执行最后的一个
6. $(window).load(function (){})可以有多个,而且都是顺序执行。
扩展:
如果要js实现多个window.onload的方式
1.在body中调用多个函数
<body onload="f1();f2();f3();">
</body>
这种方式和下面这种方式是一样的。
function f1(){...}
function f2(){...}
window.onload=function(){
f1();
f2();
}
显然,这种方式不太可取。毕竟不能把所有页面的function都聚在一堆。
2. 判断window.onload是否已经执行了一次,如果是的话,就把原来执行的window.onload函数按照方式1来处理。这样就不会覆盖了
function f1(){...}
function f2(){...} function moreLoad(fn) {
var winLoad = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
winLoad ();
fn();
}
}
} moreLoad(f1)
moreLoad(f2)
3. 采用事件监听,ie8以及ie8以下为attachEvent,其它的为addEventListener。这样也不会覆盖
function f3(){
alert("f3")
}
function f4(){
alert("f4")
}
function win_load(callBack){
if (window.attachEvent) {
window.attachEvent("onload", callBack);
} else if (window.addEventListener) {
window.addEventListener("load", callBack);
}
}
win_load(f3)
win_load(f4)
注意:
1.attachEvent的第二个参数,需要在事件前面加“on”,所以这里加载事件是onload 。而addEventListener第二个参数不用再事件前面加“on”,所以这里是load;本来还有第三个参数,可选,表示指定事件是否在捕获或冒泡阶段执行。默认为false,所以这里就不用写上去。
2. ie的attachEvent里面绑定多个事件的执行顺序是不一样的,如上面的例子,IE中是先执行f4函数,再执行f3函数,倒着执行的。而addEventListener是正常的
最后说一下加载顺序:假如我在当前页面引入了两个js文件,一个a.js 一个b.js,分别都有window.onload,$(function(){}), $(window).load(function (){})
执行的顺序是:
1. 先以a.js,b.js的顺序执行a.js中未包含在window.onload与$(function(){})和$(window).load(function (){})中的代码。
2. 然后再执行$(function(){})里面的代码,
3. 然后以a.js,b.js的顺序,执行$(window).load(function (){})里面的代码,
4. 最后执行最后一个js中window.onload里面的代码
但是!!!在火狐和IE浏览器中,window.onload的执行顺序要高于$(window).load(function (){}),其它浏览器的加载顺序都是一样的。这个我就理解不了了。。。。。。
从一个例子了解window.onload、$(function(){})、$(window).load(function(){})的加载顺序的更多相关文章
- 打开一个网站,加载顺序是什么?先加载HTML然后JS然后CSS?还是什么?
HTML页面加载和解析流程 : 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...
- window.load方法 (加载全部图片,第三方网站时使用)
$(window).load( function(){ console.lo ...
- 从零开始,做一个NodeJS博客(二):实现首页-加载文章列表和详情
标签: NodeJS 0 这个伪系列的第二篇,不过和之前的几篇是同一天写的.三分钟热度貌似还没过. 1 静态资源代理 上一篇,我们是通过判断请求的路径来直接返回结果的.简单粗暴,缺点明显:如果url后 ...
- springboot一个service内组件的加载顺序
先加载自身构造器,所以在构造器中初始化时若使用需要注入的(即@Autowired注解的)组件相关的方法,则会报null: 然后加载注入的组件即@Autowired 最后加载@PostConstruct ...
- 使用Ajax.ActionLink时,点击对应的按钮会重新加载一个页面,而不是在当前页面的指定模块加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html中defer和window.onload的加载顺序
结论:defer执行的顺序先于window.onload! 案例: html代码: <!DOCTYPE html> <html lang="en"> < ...
- ajax-json,遇到的一个问题,jquery var ,加载顺序。JS对象,json格式转换。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 记录一个bootstrap因js加载顺序导致的问题(tstrap-table-mobile.min.js:7 Uncaught TypeError: Cannot read property 'defaults' of undefined)
问题描述: 网上找了会没看到答案,然后看了下源码,发现也没有问题,想到js加载的顺序,改了下,发现问题没了. 正确的顺序: 我之前把 <script src="/js/plugins/ ...
- 比较body.onload(function())、$(document).ready(function())与$(windows).load(function)
原理对比: body.onload(function())是优先将document的DOM渲染,即将页面所有的元素(包括html标签以及所引用到的图片,flash媒体等媒体文件)加载完成,然后再执行页 ...
随机推荐
- 剑指offer面试题48: 最长不含重复字符的子字符串
Given a string, find the length of the longest substring without repeating characters.(请从子字符串中找出一个最长 ...
- app ionic1 微信 微博 分享功能的实现
微信分享 1.登录微信开放平台注册账户 2.创建一个移动应用 (app) 审核过后会有一个appid 之后安装插件的时候会用到 3.在这个应用上面填写 包名 和 签名 就可以了 包名和签名的 ...
- Flex编码随笔
1.CSS定义最好放在application里面. 2.数据源是数组数据时,最好把数组转换为ArrayCollection. 3.List.CheckBox等控件的HttpService Params ...
- Getting Real内容浓缩
今天看完,想整理一下,可能会更好,也给别人提供一个快速学习的途径第一章 什么是 Getting Real?表达形式省略.精炼.精益.敏捷.用户体验.迭代改进.产品简化.第二章 建构从简做得比竟争对手少 ...
- Django1.6版本的PG数据库定义手动升级
Django1.7以后添加了migration功能,数据库定义的升级完全实现自动化,之前是通过一个叫south的app来做的.这篇文章谈一下1.6下的手动更新升级. 1.table create和ta ...
- Jenkins实现Android自动化打包
转载请标明出处:http://blog.csdn.net/zhaoyanjun6/article/details/77102359 本文出自[赵彦军的博客] 1.Tomcat 进入 https://t ...
- echarts实现中国地图数据展示
在项目中运用到图形展示数据太常见了,echarts是一款使用率非常高的插件工具,很多大平台都是使用echarts: 一般运用到条形.折线.扇形图,今天说一说在中国地图上展示各地数据: 首先要准备中国地 ...
- Heap
#include using namespace std; int heap[100010],cnt=0; void put(int x) { cnt++; heap[cnt]=x; int now= ...
- Java面向对象进阶篇(内部类)
一. 概念 大部分时候,类被定义成一个独立的程序单元.有时候把一个类放在另一个类内部定义,这个类被称为内部类,包含内部类的类也被称为外部类. 内部类的主要作用: 内部类提供良好的封装,可以把内部类隐藏 ...
- Rocketmq 集群
写在前面 Rocketmq采用apache rockemq 4.2.0release版本. 源码路径(http://mirrors.shu.edu.cn/apache/rocketmq/4.2.0/r ...