var JSLoader = function(){
var scripts = {}; // scripts['a.js'] = {loaded:false,funs:[]}
function getScript(url){
var script = scripts[url];
if (!script){
script = {loaded:false, funs:[]};
scripts[url] = script;
add(script, url);
}
return script;
}
function run(script){
var funs = script.funs,
len = funs.length,
i = 0;
for (; i<len; i++){
var fun = funs.pop();
fun();
}
}
function add(script, url){
var scriptdom = document.createElement('script');
scriptdom.type = 'text/javascript';
scriptdom.loaded = false;
scriptdom.src = url;
scriptdom.onload = function(){
scriptdom.loaded = true;
run(script);
scriptdom.onload = scriptdom.onreadystatechange = null;
};
//for ie
scriptdom.onreadystatechange = function(){
if ((scriptdom.readyState === 'loaded' ||
scriptdom.readyState === 'complete') && !scriptdom.loaded) {
run(script);
scriptdom.onload = scriptdom.onreadystatechange = null;
}
};
document.getElementsByTagName('head')[0].appendChild(scriptdom);
}
return {
load: function(url){
var arg = arguments,
len = arg.length,
i = 1,
script = getScript(url),
loaded = script.loaded;
for (; i<len; i++){
var fun = arg[i];
if (typeof fun === 'function'){
if (loaded) {
fun();
}else{
script.funs.push(fun);
}
}
}
}
};
}();
调用方法示例:
先在页面上加载JSLoader.js文件
然后执行
JSLoader.load('js/test.js' , function () {a();})
表示异步加载test.js文件,并且加载完成后再执行a()方法,a()方法是test.js里面的方法,a()方法就是负责渲染一些前端页面的网页效果来的。
不过该方法在ie7下并不会产生异步的效果,在ie7下需要使用延时触发器来包装一下,如:
setTimeout(" JSLoader.load('js/test.js' , function () {a();})", 1);
分享到:
相关推荐
当项目js(css)文件使用越来越多,js 文件的加载也成了性能上的一个问题,此资源能够在页面全部加载完成后异步加载js等资源文件,它可以顺序加载资源列表,也可以并发加载资源列表,它包含一个方法调用接口:...
**JSLoader:异步加载JavaScript文件** 在网页开发中,JavaScript文件的加载是网页渲染过程中的关键步骤。大型应用往往包含多个JS文件,这可能导致页面加载速度变慢,影响用户体验。为了解决这个问题,开发者引入了...
JavaScript 异步加载是优化网页性能的关键技术,它能让页面在不等待脚本执行的情况下继续渲染,从而提高用户体验。在现代网页开发中,由于 JavaScript 文件的体积越来越大,同步加载(即默认方式)会阻塞浏览器解析...
在JavaScript(JS)中,异步加载图片是一种优化网页性能的技术。它允许浏览器在不影响页面主要功能的情况下,按需或后台加载非关键资源,如图片。这样可以减少页面初次加载的时间,提高用户体验,特别是对于含有大量...
动态加载外部JS文件是网页开发中的一个重要技术,它允许网页在需要时按需加载JavaScript资源,从而提高页面的加载速度,优化用户体验,并有效地管理复杂的项目结构。以下将详细阐述动态加载的原理、方法以及相关实践...
JavaScript(JS)异步加载库是一种能够帮助开发者在网页中延迟加载或按需加载JavaScript资源的工具。这种库可以显著提高网页性能,减少首屏加载时间,优化用户体验,特别是对于那些依赖大量脚本的复杂应用而言。下面...
标题 "JS 动态树 异步加载树 xloadtree WebFXLoadTree" 指的是在JavaScript中实现的一种特定的树形结构组件,它具备动态加载和异步数据获取的功能。这种技术常用于构建大型数据集的层级展示,如文件系统、组织结构或...
JavaScript 异步加载是网页优化的关键技术之一,它允许脚本在不阻塞浏览器解析页面的情况下进行下载和执行。在传统的同步加载模式下,JavaScript 文件的加载会暂停HTML的解析,直到该脚本完全下载并执行完毕。这可能...
本文将深入探讨“手机移动端Tab选项卡切换带下拉数据异步加载js插件”的相关知识,包括其工作原理、实现方式以及如何优化。 1. **Tab选项卡设计** - Tab选项卡是一种常见的界面设计模式,它允许用户通过点击不同的...
异步加载数据可以提高页面加载速度,特别是处理大量数据时,也可以实现动态更新图表,让图表实时反映后台数据的变化。 总结来说,ECharts的基础折线图是通过定义配置项和数据来创建的,而异步加载数据则可以通过...
在IT行业中,异步加载是一种优化用户体验的重要技术,特别是在处理大量数据或资源,如图片时。在这个场景中,"异步加载的3d图片效果"指的是一个应用或项目,它结合了3D图像展示和异步加载技术,使得用户可以在浏览3D...
Requirejs和Dojo是...总的来说,通过Requirejs异步加载Dojo 1.6,可以充分利用两者的优势,实现高效、模块化的JavaScript开发,并在Tomcat6服务器环境下顺畅运行。这不仅提升了代码的可维护性,也优化了用户体验。
在IT领域,尤其是在Web开发...总结,Java实现ZTree异步加载涉及前端ZTree的配置、Ajax请求的发送,以及后端Java服务的处理和数据返回。理解这个过程并正确实施,可以显著提升ZTree的用户体验,尤其是在处理大量数据时。
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言,它主要负责处理客户端的交互和数据管理。在实际项目中,为了提高页面加载速度和优化用户体验,我们常常需要按需加载JavaScript文件,而不是一次性加载所有...
`script.js`是一个轻量级且功能强大的工具,它允许开发者实现异步加载JavaScript文件,并有效地管理它们之间的依赖关系,从而提升网页的加载速度和用户体验。 1. **异步加载的优势** - **非阻塞加载**:传统的方式...
2. **动态加载JS文件的实现** - 在浏览器环境中,可以通过创建`<script>`标签并动态插入DOM中来加载外部JS文件。 - 为了更好地控制加载过程并在文件加载完成后执行回调函数,通常会监听`script`标签的`onload`事件...
- **SEO**:搜索引擎爬虫可能不会执行JavaScript,因此要确保对SEO友好的处理,如提供`noscript`标签。 - **性能监控**:定期检查性能指标,确保懒加载没有带来反效果,如过度增加滚动时的CPU使用率。 ### 5. 结论 ...
在本文中,我们将探讨如何使用JavaScript读取本地文件夹,并实现图片的异步加载,即图片的LazyLoad技术。 一、JavaScript读取本地文件夹 在浏览器环境中,出于安全考虑,JavaScript无法直接访问用户的本地文件系统...
本人手写的一款js树形控件,附带图片,代码简洁,注释齐全,可读性高,易于维护,方便移植,结构清晰,思路明了,界面美观,同时支持异步加载,对浏览器的兼容行强,你还可以根据自己的需要扩展功能,可大量应用于...