`

jQuery的load方法载入远程 HTML 文件的执行顺序

阅读更多
一个html文件在浏览器中的加载顺序是顺序进行的,如下文件:


<!DOCTYPE html>
<html>
<head>
	<title>a.html</title>
	
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="this is my page">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
	<script type="text/javascript">
		alert('test');
	</script>
</head>
<body>
	This is my a HTML page.
	<button>funa</button>
	<br>
</body>

</html>



该文件直接在浏览器访问时,执行顺序是依次加载执行,先执行js中的alert,再加载body里面的内容。
不过用jQuery的load方法载入这个html文件时,该html的执行的顺序则是:首先加载完整个文档,再执行js的alert。
如果在上述html文件中加载一个js文件,<script type="text/javascript" src="test.js" charset="utf-8"></script>,变成:

<!DOCTYPE html>
<html>
<head>
	<title>a.html</title>
	
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="this is my page">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	
	<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
        <script type="text/javascript" src="test.js" charset="utf-8"></script>
	<script type="text/javascript">
		alert('test');
	</script>
</head>
<body>
	This is my a HTML page.
	<button>funa</button>
	<br>
</body>

</html>



而test.js的内容如下:
$(document).ready(function() {
	alert('onload');
});

那么load该html文件时,test.js里面的代码会执行吗?经测试,jQuery1.44会执行,jQuery1.72则不会执行。
分享到:
评论

相关推荐

    jQuery Ajax之load()方法

    load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入到DOM中。它的语法结构为:  load( url [, data][, callback] )  load()方法参数解释见下表: 参数名称 类 型 说 明 url String ...

    jquery-load-demo

    《jQuery Load方法详解及其在网页动态加载中的应用》 在Web开发中,jQuery库以其简洁易用的API和强大的功能,成为了JavaScript开发者的首选工具之一。"jquery-load-demo"这个项目,显然着重展示了jQuery的load()...

    jquery-get-post-load 方法

    ### jQuery中的GET、POST与LOAD方法详解 #### 一、概述 jQuery 是一款非常流行的 JavaScript 库,它简化了许多常见的 Web 开发任务,包括 AJAX 请求。本文将详细介绍 jQuery 中 GET、POST 和 LOAD 方法的使用方法...

    jQuery中load()方法语法格式

    在这个例子中,当用户点击ID为`button`的按钮时,jQuery会使用`load()`方法从`a.html`文件中加载内容,并将其插入到ID为`tip`的`&lt;div&gt;`元素中。这样,页面的部分内容得以动态更新,而无需重新加载整个页面,从而提高...

    用Jquery.load载入页面实现局部刷新

    JQuery提供的.load()方法就是实现局部刷新的一种简便方式,它允许从服务器获取新的数据并把它们插入到当前页面中的指定元素内。 然而,在使用JQuery的.load()方法进行页面局部加载时,有时会发现新加载的页面内容与...

    JQuery Lazyload加载图片实例

    **jQuery Lazyload 图片加载技术详解** 在网页设计中,图片是重要的元素之一,但大量图片的预加载可能会拖慢页面的加载速度,影响用户体验。为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许...

    jquery.load 是无法替代 iframe的

    然而,有时候开发者会误解jQuery的一些方法,比如`load()`,认为它可以完全替代iframe的使用场景。实际上,`jquery.load()` 和 iframe 有着不同的功能和应用场景,它们之间并不能互相完全替代。 `jquery.load()` 是...

    jquery.lazyload图片预加载效果 jquery预加载

    1. 引入jQuery库和LazyLoad插件:首先在HTML文档的头部引用jQuery库(如jQuery 1.7.2以上版本)和LazyLoad插件的JS文件。 ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ...

    jQuery load方法用法集锦

    jQuery的`load`方法是用于异步加载HTML内容到指定的DOM元素中,它使得动态更新页面变得简单。`load`方法是jQuery AJAX功能的一部分,主要用于处理局部的页面更新,而不是整个页面的刷新。 调用`load`方法的基本格式...

    jqueryhtml文件

    jquery提供的波形图html文档,纯粹的html布局与框架

    JQuery LazyLoad 图片懒加载实例

    接着,从官方仓库或者第三方源获取jQuery LazyLoad插件的JavaScript文件,将其引入到HTML页面中,通常放在`&lt;head&gt;`标签内: ```html &lt;script src="https://code.jquery.com/jquery-3.6.0.min.js"&gt;&lt;/script&gt; ...

    jQuery_lazyload

    - 引入jQuery库和jQuery_lazyload脚本:确保在HTML文档中引入jQuery和jQuery_lazyload的JS文件。 - 设置数据属性:将需要延迟加载的图片或者其他元素设置特定的数据属性,如`data-src`或`data-original`,并将真正...

    前端项目-jquery.loadtemplate.zip

    - **模板语法**:`jquery.loadtemplate` 支持简单的模板语法,如 `${property}` 用于替换属性值,`#${expression}` 用于执行简单的JavaScript表达式。 - **缓存**:插件会自动缓存加载的模板,提高性能。 - **...

    jQuery ajax - load() 方法

    `jQuery` 的 `load()` 方法在处理简单的数据加载场景时非常方便,但如果需要更复杂的异步操作,比如文件上传、自定义HTTP头或跨域请求,可能需要使用 `$.ajax()` 或 `$.get()`、`$.post()` 等更强大的方法。...

    jQuery Mobile 所需要的部署文件

    在示例中,这可能是通过远程链接到CDN,或者在本地目录中包含一个CSS文件。 3. **jQuery Mobile JavaScript**:这是jQuery Mobile的核心库,负责处理触摸事件、页面加载和转换、以及组件的动态化。同样,可以链接到...

    jquery.lazyload.js

    首先,你需要在网页中引入jQuery库和jQuery.Lazyload.js文件,例如: ```html &lt;script src="jquery.js"&gt; &lt;script src="jquery.lazyload.js"&gt; ``` 然后,为需要懒加载的图片添加特定的类名(默认为`lazyload`): ```...

    jQuery.lazyload.js

    2. **引入jQuery.lazyload.js**:将jQuery.lazyload.js文件添加到HTML文档的`&lt;head&gt;`或`&lt;body&gt;`标签内。 3. **设置HTML结构**:将需要延迟加载的图片元素加上特定的类名,如`data-src`代替`src`,以便jQuery.lazy...

    jQuery使用load()方法载入另外一个网页文件内的指定标签内容到div标签的方法

    这篇文章主要介绍了如何使用jQuery的load()方法,将另一个网页文件中的特定标签内容载入到div标签中,这是通过AJAX技术实现的。 首先,要使用load()方法,需要在页面中引入jQuery库。load()方法是jQuery中AJAX模块...

    用Jquery.load载入页面后样式没了页面混乱的解决方法

    在使用jQuery的`.load()`方法进行页面部分刷新时,可能会遇到一些问题,如样式丢失、页面结构混乱等。这些问题通常是由于不正确的使用方法或者对`.load()`的理解不足导致的。以下将详细介绍这些问题的原因以及如何...

    jquery lazyload延时加载

    1. **引入 jQuery 和 LazyLoad**:首先确保页面中已经引入了 jQuery 库,然后引入 LazyLoad 的 JavaScript 文件,如 `jquery.lazyload.js`。 2. **设置 HTML 结构**:给需要延时加载的图片添加特定的类名(如 `lazy...

Global site tag (gtag.js) - Google Analytics