jquery-10 js加载的时机如何选择

一、总结

一句话总结：主要应用widow的ready()方法和load()方法。

1、内部文件中DOM加载完毕执行js如何书写？

把js标签放在body之后即可!

2、外部引入文件中DOM加载完毕执行js如何书写？

$(document).ready(fn);
$(fn);

多用$(fn)，这样方便快捷

$(function(){
    //所有代码都是等dom加载完毕才会去执行!
});

3、内部和外部文件中资源加载完毕执行js如何书写？

window的load方法

$(window).load(function(){
    //代码     
});

21 $(window).load(function(){

22     w=$('img').width();

23     h=$('img').height();

24     alert(w+'-'+h);

25 });

二、js加载的时机如何选择

1、相关知识

0.js加载执行的时机
1)DOM加载完毕
把js标签放在body之后即可!

2)资源加载完毕
$(window).load(function(){
    //代码     
});

3)jquery中实现等dom加载完毕?
$(function(){
    //所有代码都是等dom加载完毕才会去执行!
});

1.页面载入
$(document).ready(fn);
$(fn);

2、代码

资源加载完毕

 <!doctype html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>index</title>

     <style>

         *{

             font-family: 微软雅黑;

             margin:0px;

             padding:0px;

         }

     </style>

     <script src="jquery.js"></script>

 </head>

 <body>

     <div>

         <img src="a.png" alt="">

     </div>

 </body>

 <script>

 $(window).load(function(){

     w=$('img').width();

     h=$('img').height();

     alert(w+'-'+h);

 });

 </script>

 </html>
 

jquery-10 js加载的时机如何选择的更多相关文章

  1. JQuery文档加载完成执行js的几种方法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  2. jquery getScript动态加载JS方法改进详解[转载]

    转载自http://www.jb51.net/article/31973.htm 有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法     $.getScript( ...

  3. jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明

    jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...

  4. JQuery 之 动态加载JS或JS文件

    如果用jquery的append直接加载script标签的话,会报错的. 1.可以用 document.write() 实现加载动态JS代码. 2.可以用 getScript() 函数实现加载JS文件 ...

  5. jquery getScript动态加载JS方法改进详解

    有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法 $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当 ...

  6. jQuery实现无限加载瀑布流特效

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

  7. jQuery文档加载完毕的几种写法

    js中文档加载完毕.一般在body加一个onload事件或者window.onload = function () {} jQuery中有好多写法,平时也不注意,别人一问,还真觉得头大. 下面是我整理 ...

  8. jQuery延迟加载(懒加载)插件 – jquery.lazyload.js-Web前端(W3Cways.com) - Web前端学习之路

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预 ...

  9. jquery图片懒加载效果

    1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...

随机推荐

  1. git- 仓库创建、修改、提交、撤销

    1.仓库创建 zhangshuli@zhangshuli-MS-:~$ mkdir myGit zhangshuli@zhangshuli-MS-:~$ cd myGit/ zhangshuli@zh ...

  2. actionBar-shareIcon 分享按钮的修改

    今天为了修改图库的分享按钮,进行了很多的尝试 1.寻找到了xml文件,如下 <?xml version="1.0" encoding="utf-8"?&g ...

  3. javascript创建对象的方法--原型模式

    javascript创建对象的方法--原型模式 一.总结 1.原型模式解决内存浪费的方法(继承):通过继承,对象继承原型模式下的所有属性,对象不同于其它对象的的属性自己创建或者修改 2.原型的使用(p ...

  4. Flume的Storage&Master

    storage是存储系统,可以是一个普通file,也可以是HDFS,HIVE,HBase,分布式存储等. Master是管理协调Agent和Collector的配置等信息,是flume集群的控制器.

  5. node 内存溢出

    遇到这个问题的人可以更快解决 再复制写一篇 利于百度搜索 坑爹的node 内存溢出 react开发项目  安装一个插件依赖 ,然后就报错了 报错如下(自己的没有截图出来 这是从别人的截图---报错基本 ...

  6. js中event事件处理

    1. HTML事件  直接添加到HTML结构中 function show() { alert('hello'); } <body> <button id="btn&quo ...

  7. 18/9/9牛客网提高组Day1

    牛客网提高组Day1 T1 中位数 这好像是主席树??听说过,不会啊... 最后只打了个暴力,可能是n2logn? 只过了前30%  qwq #include<algorithm> #in ...

  8. 6.CPP风格数组

    //数组初始化 1 #include <iostream> using namespace std; void main() { //C int a[5] = { 1,2,3,4,5 }; ...

  9. python3中让程序暂停运行的语句

    https://blog.csdn.net/zmz971751504/article/details/78288988

  10. HTTP网络协议(五)

    主动攻击:是指攻击通过直接访问Web应用,把攻击代码传入的攻击模式,该模式是直接针对服务器上的资源进行攻击,因此攻击者需要能够访问到那些资源,例如:SQL注入攻击和OS命令注入攻击.  被动攻击:是指 ...