最近遇到一个轮播需求：

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. Gulp基础知识

    首先,我们需要了解Gulp能做些什么? 编译 sass                                        sass是什么?(使CSS可以用编程的方式写,加快我们开发的速度) ...

  2. day09_request&response学习笔记

    ============================================================ 一.HttpServletResponse接口 p.MsoNormal { m ...

  3. The note of Developing Innovative Ideas for New Companies Course

    This course is free on the Coursera Site,But it only has English version Threee pieces of the course ...

  4. Ocelot中文文档-认证

    为了验证ReRoutes并随后使用Ocelot的任何基于声明的功能,如授权或使用令牌中的值修改请求. 用户必须像往常一样在他们的Startup.cs中注册认证服务,但他们给每个注册提供了一个方案(认证 ...

  5. Ocelot中文文档-日志

    目前,Ocelot使用标准的日志记录接口ILoggerFactory/ILogger . 在IOcelotLogger / IOcelotLoggerFactory中提供了标准的asp.net cor ...

  6. Redis linux 外部telnet访问不通

    外部访问不通: 1.修改redis.conf中的daemonize的值设为no: 2.修改redis.conf中的bind的值127.0.0.1为linux本身的ip地址,如192.168.1.120

  7. Redis未授权访问

    最近在做校招题目的时候发现有问到未授权访问,特此搭建了诸多未授权访问的环境并且一一复现并做简单总结.再次记录下来 环境介绍 0x00环境搭建 我这里用到的是Microsoft(R) Windows(R ...

  8. js动态计算移动端rem适配问题

    第一:css3的media query来实现适配,例如下面这样: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 2 ...

  9. @ExceptionHandler异常统一处理

    之前处理工程异常,代码中最常见的就是try-catch-finally,有时一个try,多个catch,覆盖了核心业务逻辑 try{ .......... }catch(Exception1 e){ ...

  10. 异常--java.text.ParseException: Unparseable date

    String d = "2015-05-19" SimpleDateFormat sdf =   new SimpleDateFormat( "yyyy/MM/dd HH ...