`
zhouyrt
  • 浏览: 1162663 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS Queue LazyLoad 之一

 
阅读更多

前面三篇实现了多个JS并行加载，即各个JS文件相互不依赖。实现时仅顺序将其插入到head中。直至全部插入完毕才进行回调。并行下载的好处是效率较高。

 

但有时我们需要加载的JS模块之间存在相互依赖关系。如a,b,c三个JS文件。b.js中代码依赖于a中定义的某些函数或类，c.js又依赖b.js中的函数或类，而c中具有一个入口函数。这时得保证a,b,c顺序加载，否则如果c早于b或a先加载完，则可能会出现xx未定义之类的错误提示。顺序加载的缺点就是效率较低，因为必须一个个的下载。

 

Queue LazyLoad 0.1版接口非常之简单，如下传个数组url即可

QueueLazyLoad.js([
		{
			url  // JS路径
		}
		...
]);

 

 

看一个最简单的顺序加载示例，

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<title>QueueLazyLoad_0.1.js</title>
		<script src="http://files.cnblogs.com/snandy/QueueLazyLoad_0.1.js"></script>
		<script type="text/javascript">
			var libs = [
				{url:'http://files.cnblogs.com/snandy/a.js'},
				{url:'http://files.cnblogs.com/snandy/b.js'},
				{url:'http://files.cnblogs.com/snandy/c.js'}
			];
			function start(){
				QueueLazyLoad.js(libs);
			}
		</script>
	</head>
	<body>
		<button onclick="start()">Queue LazyLoad</button>
	</body>
</html>

 

 

先引入了QueueLazyLoad_0.1.js，点击按钮后调用QueueLazyLoad.js方法。各个浏览器加载图如下

 

Firefox

 

 

Chrome

 

 

IE9

 

 

从各浏览器下载时间线可看到，时间线无重合部分。即a,b,c三个是顺序下载的。这样就保证了它们之间的依赖关系不会打乱。

  • 大小: 13.9 KB
  • 大小: 32.6 KB
  • 大小: 6.9 KB
0
顶
1
踩
分享到：
| JS/CSS module LazyLoad 之三
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Chapter8(jquery).zip

    例如，用于图片懒加载的jQuery.lazyLoad，或者用于表格排序的jQuery.dataTables等。 八、性能优化与兼容性 理解jQuery的性能优化技巧是提升网页加载速度的关键。比如，避免频繁的DOM操作，利用缓存结果，以及使用 ...

    jQuery基础教程（Learning_jQuery）中文完整

    jQuery拥有庞大的插件生态系统，如：Bootstrap、jQuery UI、jQuer_lazyload等，这些插件扩展了jQuery的功能，如表单验证、轮播图、图片懒加载等。 ### 6. jQuery与现代框架的对比 随着Vue.js、React和Angular等...

    js代码-链式函数+懒加载

    链式函数，也称为链式调用，是JavaScript中面向对象编程的一个特性，主要体现在jQuery和其他类库或框架中。它的核心思想是在一个对象的方法返回该对象本身，这样就可以连续调用多个方法，形成一个链。例如： ```...

    jquery的各种库

    jQuery拥有丰富的插件生态系统，如表单验证插件jQuery Validation，图片懒加载LazyLoad，轮播图插件Slick等，它们扩展了jQuery的功能，满足更多需求。 ### 6. 兼容性与性能优化 - **浏览器兼容**：jQuery致力于...

    jQuery图片效果

    例如，使用`懒加载`技术（`.lazyload()`插件）延迟加载不在视口内的图片，减少页面加载时间；或者使用`CSS精灵`技术合并小图片，减少HTTP请求。 通过以上讨论，我们可以看出jQuery在图片效果方面具有强大的功能和...

    jquery (1.32-1.9.1)版本

    7. **插件生态**：jQuery的生态丰富，有大量插件可供选择，如滑动插件`slideshow`, 模态对话框`modal`, 图片懒加载`lazyload`等，它们扩展了jQuery的功能，满足了更多应用场景。 8. **最佳实践**：在使用jQuery时，...

    图库新版jQuery焦点图 JS代码

    tips[27] = '“放之四海皆准则”的是真理，真理并不是一种方法，没有一种方法能解决所有的问题；掌握真理，而不是掌握某种方法。'; tips[28] = '在理解的基础上借鉴，就是站在巨人的肩膀之上；没有区分的全盘抄袭，...

    .NET技术学习大纲

    掌握在EF中执行原生SQL的方法，了解导航属性与Lazy Load的工作机制。深入学习EF中的实体继承。 - **ASP.Net MVC**：深入学习Razor视图引擎的语法特点。掌握分页技术，理解数据传输的不同方式（如ViewBag、ViewData、...

    30个jquery经典Demo

    jQuery，作为一款强大的JavaScript库，以其简洁的API和高效的功能，深受Web开发者的喜爱。这里我们聚焦于30个经典的jQuery Demo，它们涵盖了从基础交互到复杂动画的各种应用场景，旨在帮助开发者深入理解jQuery的...

    写出高效jquery代码的19条指南

    11. **使用 `$(document).ready()` 替代 `$(window).load()`**：`ready` 事件在DOM加载完成后触发，而 `load` 等待所有资源加载完毕，通常 `ready` 更快。 12. **避免使用 `each()` 迭代**：当jQuery提供了更高效的...

Magicbox
Global site tag (gtag.js) - Google Analytics