`

javascript.async异步加载页面。

 
阅读更多
/*
 *异步js 扩展加载标识
 *@author 
 */
(function($){
	if($.fn.async) {
		return;
	}
	if(!document.body) {
		document.write("<body/>");
	}
	$.fn.extend({
		async : function(url,obj,callback) {//异步路径,指定异步返回数据填充的div,回调函数
			if(!this) {
				alert("对象未找到...");
				return;
			}
			var height;
			if(obj) {
				var _obj = typeof(obj);
				if( _obj == "function")  {
					callback = obj;
				}else if(_obj == "number") {
					height = obj;
				}
			}
			obj = this.wrap("<div style='position:relative;width:100%;'/>");
			var o = obj.parent();
			var img = $("<img src='/common/images/loading.gif' style='position:absolute;z-index:9999;display:none;'/>").appendTo(o);
			var h = img.height();
			var oh = obj.height();
			var top = height ? height : oh < h ? 0 : (oh-h)/4;
			img.css({"left":(obj.width()-img.width())/2,"top":top < 20 ? 20 : top,"display":""});
			$.ajax({
				url  : url,
				timeout : 30000,
				complete : function() {
					o.replaceWith(obj);
					if($.isFunction(callback)) {
						callback();
					}
				},
				success : function(data) {
					obj.html(data);
				}
			})
		}
	});
})(jQuery);

加载图片:
分享到:
评论

相关推荐

    async-script-loader:异步加载脚本

    异步脚本加载器程序包会将脚本追加到主体并异步加载。 还有其他一些软件包可以做非常相似的事情,但是,我发现它们都是在每次请求脚本时都加载脚本的。 很多时候,这样做的目的是一次加载脚本,然后立即解析(如果已...

    js异步加载的三种解决方案

    默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户...

    Async-Write:JavaScript写入,写入,广告异步加载

    JavaScript Write Writeln 函数 广告 异步加载 /** * write 延迟加载扩展 支持 延迟加载广告等 Google baidu 支持几乎所有的广告商 支持延迟载入统计代码等.... * * BY: http://www.lianyue.org/ 恋月 * * 1 参数 ...

    Javascript 异步加载详解(浏览器在javascript的加载方式)

    一、同步加载与异步加载的形式 1. 同步加载 我们平时最常使用的就是这种同步加载形式: [removed][removed] 同步模式,又称阻塞模式,会阻止浏览器的后续处理,停止了后续的解析,因此停止了后续的文件加载(如图像...

    async-loader:异步模块加载器

    异步加载器 用于加载 JavaScript 模块的轻量级异步模块加载器。 依赖关系 没有任何 入门 npm install async-loader --save-dev 应用程序接口 ##AsyncLoader~load(moduleName, path) 返回一个promise 参数 ...

    angular-async-loader:异步加载角度模块及其依赖项

    异步加载 angular 模块及其依赖项。 如果应用程序离线,加载器将等待在线以开始下载。 参见 ngCordova:$cordovaNetwork。 如果 $cordovaNetwork 可用,它将使用它来检查在线状态。 否则,它使用 navigator.onLine ...

    asyncjs:稍微不同的 JavaScript 加载器和依赖管理器

    与许多其他脚本加载器不同,asyncJS 可以异步加载内联函数和脚本字符串以及外部 JavaScript 文件。 asyncJS使用类似 Defer 的队列来跟踪任务,允许您附加额外的任务、附加额外的回调以及处理回调中的错误,使其...

    vue-async-assets:vue异步加载插件组件指令过滤器

    vue异步加载插件/组件/指令/过滤器 vue中插件一般是同步加载然后使用的,我想实现的是异步加载然后使用。 声明式使用方法: asyncPlugin:{ 'elementUi':import("element-ui"), 'myPlugin':{ plugin:import("./...

    异步加载JS、CSS代码(推荐)

    我的风格你懂得,具体详情介绍如下...s.type = 'text/javascript'; s.async = true; s.src = V_src; var x = document.getElementsByTagName('script')[0]; x[removed].insertBefore(s, x); s.onload = function () { i

    react-async-loader:React组件异步加载器

    功能支持初步加载export default的组件支持异步加载export的React组件安装npm i @beisen-elearning/async-component原料药asyncComponent 论点类型描述必需的importComponent ()=&gt; import(componentName / ...

    HTML5 script元素async、defer异步加载使用介绍

    异步加载,可以理解为无阻塞并发处理,过去我们使用各种JavaScript技巧来做这种事情,现在WebKit为HTML5实现了SCRIPT标签的async异步属性,感兴趣的朋友可以了解下

    react-hook-async:用React Hook异步

    对于钩子,我们通常使用诸如const [loading, setLoading] = useState(false)来操纵我们的UI:显示一个加载指示器,一条错误消息,……这是在使您的工作更轻松一些与异步数据。 import React , { useState } from '...

    Ajax-async-js.zip

    Ajax-async-js.zip,学习异步javascript,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的情况下更改。

    ECMAScript-6标准入门(第三版).zip

    ES6是下一代JavaScript语言标准的统称,本书为中级难度,适合那些已经对JavaScript语言有一定了解的读者,可以作为学习这门语言最新进展的工具书,也可以作为参考手册供大家随时查阅新语法。 第3版增加了超过30%的...

    async-image:简单的React组件,可异步加载图像

    异步图像加载器组件。 通过以下方式安装: npm install --save @yuigoto/async-image 去做 即将提交的描述。 参见TODO.md 执照 该项目是根据MIT License ,请查看LICENSE.md文件以获取更多详细信息。 作者 参见...

    vueasyncdata是Vuejs的异步数据加载插件

    vue-async-data是Vue.js的异步数据加载插件

    浏览器环境下JavaScript脚本加载与执行探析之defer与async特性

    defer和async特性相信是很多JavaScript开发者”熟悉而又不熟悉”的两个特性,从字面上来看,二者的功能很好理解,分别是”延迟脚本”和”异步脚本”的作用。然而,以defer为例,一些细节问题可能开发者却并不一定...

    CondiLoader:JavaScript和CSS的条件异步加载程序脚本

    异步条件javascript和CSS加载器 该脚本旨在在网页上进行非阻塞条件JavaScript和CSS加载。 它接受项目数组,并且对于每个项目检查,是否在页面上显示具有指定选择器的元素或xpath。 如果是这样,脚本将加载指定CSS和...

    Ajax-render_async.zip

    Ajax-render_async.zip,render_async允许使用ajax异步包含页面,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...

    promise-async-cache:简单的lib通过异步加载过程缓存数据

    承诺异步缓存 感谢的初始实现:)安装通过npm安装: $ npm install promise-async-cache用法 // the example uses es6 but it works with es5 as wellimport PromiseAsyncCache from 'promise-async-cache' ;...

Global site tag (gtag.js) - Google Analytics