最近遇到一个轮播需求：

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(){})的加载顺序的更多相关文章

  1. 打开一个网站,加载顺序是什么?先加载HTML然后JS然后CSS?还是什么?

    HTML页面加载和解析流程 : 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件. 2. 浏览器开始载入html代码,发现<head& ...

  2. window.load方法 （加载全部图片，第三方网站时使用）

    $(window).load(  function(){                                                              console.lo ...

  3. 从零开始，做一个NodeJS博客（二）：实现首页-加载文章列表和详情

    标签: NodeJS 0 这个伪系列的第二篇,不过和之前的几篇是同一天写的.三分钟热度貌似还没过. 1 静态资源代理 上一篇,我们是通过判断请求的路径来直接返回结果的.简单粗暴,缺点明显:如果url后 ...

  4. springboot一个service内组件的加载顺序

    先加载自身构造器,所以在构造器中初始化时若使用需要注入的(即@Autowired注解的)组件相关的方法,则会报null: 然后加载注入的组件即@Autowired 最后加载@PostConstruct ...

  5. 使用Ajax.ActionLink时，点击对应的按钮会重新加载一个页面，而不是在当前页面的指定模块加载

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. html中defer和window.onload的加载顺序

    结论:defer执行的顺序先于window.onload! 案例: html代码: <!DOCTYPE html> <html lang="en"> < ...

  7. ajax-json,遇到的一个问题，jquery var ,加载顺序。JS对象，json格式转换。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 记录一个bootstrap因js加载顺序导致的问题（tstrap-table-mobile.min.js:7 Uncaught TypeError: Cannot read property 'defaults' of undefined）

    问题描述: 网上找了会没看到答案,然后看了下源码,发现也没有问题,想到js加载的顺序,改了下,发现问题没了. 正确的顺序: 我之前把 <script src="/js/plugins/ ...

  9. 比较body.onload(function())、$(document).ready(function())与$(windows).load(function)

    原理对比: body.onload(function())是优先将document的DOM渲染,即将页面所有的元素(包括html标签以及所引用到的图片,flash媒体等媒体文件)加载完成,然后再执行页 ...

随机推荐

  1. LeetCode - 验证二叉搜索树

    给定一个二叉树,判断其是否是一个有效的二叉搜索树. 一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数. 节点的右子树只包含大于当前节点的数. 所有左子树和右子树自身必须也是二叉搜索树. ...

  2. 类似Jquery ui 标签页(Tabs)

    <div class="indexnew_tit"> <a href="javascript:;" class="on"& ...

  3. JQuery（二）---- JQ的事件与动画详解

    JQuery的事件 /** * 1.事件绑定的快捷方式: */ $("button:eq(0)").dblclick(function(){ alert("hahaah& ...

  4. java并发包分析之———AQS框架

    一.什么是同步器   多线程并发的执行,之间通过某种 共享 状态来同步,只有当状态满足 xxxx 条件,才能触发线程执行 xxxx . 这个共同的语义可以称之为同步器.可以认为以上所有的锁机制都可以基 ...

  5. Hyper Text Transfer Protocol（超文本传输协议）

    HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的传送 ...

  6. centos/linux 禁止root用户远程登录

    注意:在禁止root等前要建立一个用户用来远程登录,否则退出后无法通过远程登录服务器. 编辑 /etc/ssh/sshd_config 文件 更改参数 PermitRootLogin yes 为 Pe ...

  7. MariaDB/MySQL备份和恢复(一)：mysqldump工具用法详述

    本文目录:1.备份分类2.备份内容和备份工具3.mysqldump用法详述 3.1 语法选项 3.1.1 连接选项 3.1.2 筛选选项 3.1.3 DDL选项 3.1.4 字符集选项 3.1.5 复 ...

  8. Django入门三之urls.py重构及参数传递

    1. 内部重构 2. 外部重构 website/blog/urls.py website/website/urls.py 3. 两种参数处理方式 -1. blog/index/?id=1234& ...

  9. Java （三、数组）

    Java 数组 数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同. Java 语言中提供的数组是用来存储固定大小的同类型元素. 声明数组变量 首先必须声明数组 ...

  10. 什么是分布式锁及正确使用redis实现分布式锁

    分布式锁 分布式锁其实可以理解为:控制分布式系统有序的去对共享资源进行操作,通过互斥来保持一致性. 举个不太恰当的例子:假设共享的资源就是一个房子,里面有各种书,分布式系统就是要进屋看书的人,分布式锁 ...