jquery的一种简写形式:

$(function(){ 
alert("页面加载完成!");
}); 

其对应的完整形态为:

$(document).ready(function(){
alert("页面加载完成!");
});

原生JS方法:

window.onload=function(){
alert("页面加载完成!");
}

这几种方法在功能上的效果是一样的,但是三者(或者说两者)还是有一些区别的:

  window.onload 会在页面的document全部加载完成以后,并且要求所有的外部图片和资源全部加载完成后才会执行操作。

  $(document).ready(function() 只需要在浏览器把所有的HTML放入DOM tree之后就执行js效果。包括在加载外部图片等资源之前。

所以,建议使用方式:

    样式控制的,比如图片大小控制,使用$(window).load();

jS事件触发的方法,可以在$(document).ready()里面加载

js页面加载完成事件的更多相关文章

  1. JS 页面加载触发事件 document.ready和window.onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  2. JS 页面加载触发事件 document.ready和onload的区别(转)

    原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...

  3. JS 页面加载触发事件 document.ready和onload的区别

    document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...

  4. jq常用事件(on,blur,focus,change),js/jq等待图片(页面)加载完毕事件,js读取文件

    jq常用事件(on,blur,focus,change) // 方法一(推荐) $('.box').on( "click",function() {} ) $('.box').on ...

  5. js页面加载完后执行(document.onreadystatechange 和 document.readyState)

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  6. jQuery页面加载完毕事件及jQuery与JavaScript的比较

    1.jQuery概述 jQuery是一个JavaScript库,它集成了JavaScript.DOM.CSS和Ajax,简化了JavaScript编程,提倡write less, do more. 2 ...

  7. js页面加载函数

    在未加载完文档,使用jquery选择器选择元素后,如果立即绑定事件进行调用,会引起js的报错(can not read property of undefined),导致事件不能绑定成功. alert ...

  8. 前端 页面加载完成事件 - onload,五种写法

    在js和jquery使用中,经常使用到页面加载完成后执行某一方法.通过整理,大概是五种方式(其中有的只是书写方式不一样). 1:使用jQuery的$(function){}; 2:使用jquery的$ ...

  9. js页面加载进度条(这个就比较正式了,改改时间就完事儿)

    不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...

随机推荐

  1. day02 : JPA的基本使用和多种缓存技术对比

    1). 按照条件查询标签: ① 在controller种添加方法 [确保表中有数据] /** * 根据条件查询 */ @PostMapping("/search") public ...

  2. C# 比较两文本相似度

    这个比较文本用到的主要是余弦定理比较文本相似度,具体原理右转某度,主要适用场景是在考试系统中的简答题概述,可根据权重自动打分,感觉实用性蛮广的. 先说下思路: 文本分词,中文于英文不同,规范的英文每个 ...

  3. CISCO 关闭4786端口解决方法

    先确认交换机是否支持smart install服务 检查命令如下: switch#show vstack config | inc Role Role:Client (SmartInstall ena ...

  4. ResNet网络再剖析

    随着2018年秋季的到来,提前批和内推大军已经开始了,自己也成功得当了几次炮灰,不过在总结的过程中,越是了解到自己的不足,还是需要加油. 最近重新复习了resnet网络,又能发现一些新的理念,感觉很f ...

  5. Spring源码学习(8)——SpringMVC

    spring框架提供了构建Web应用程序的全功能MVC模块.通过实现servlet接口的DispatcherServlet来封装其核心功能实现,通过将请求分派给处理程序,同时带有可配置的处理程序映射. ...

  6. 自学python之路(day4)

    一 购物车小程序 goods=[{}, {}, {}] shop_car={} li=[] ,len(goods)): li.append(i) money=input('请输入您的总金额:') if ...

  7. jquery tmpl生成导航

    引入<script src="jquery.tmpl.min.js"></script> html<ul class="nav" ...

  8. CRC8反转校验

    最近在做项目遇到一个问题,就是需要对数据进行CRC8校验,多项式是 X7+X6+X5+X2+1,对应的二进制表达是 11100101,但是因为传输反转所以我们这里的多项式二进制表达方式 为 10100 ...

  9. ZT 将sublime text的tab改为四个空格

    打开Sublime Text3,选择菜单Preferences->Settings-User,打开用户配置文件(据本人理解,Settings-Default是不允许用户自己修改的~而Settin ...

  10. 定时清理elasticsearch

    索引这种格式 以下脚本加入crontab #每天清理es数据 0 1 * * * /data/sh/rm_esindex.sh >> /data/logs/crontab/rm_esind ...