js 按需加载

一、通过点击事件加载代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>模版形式---按需加载</title>
</head>
<body>
<script type="text/x-template" id="suc_subscription">
	<div>
		<img src="image address">
	</div>
</script>
<div id="success_dialog"></div>
<input type="button" value="load" onclick="showHtml();">

<script type="text/javascript">
	function showHtml(){
		document.getElementById(‘success_dialog‘).innerHTML = document.getElementById(‘suc_subscription‘).innerHTML;
	}
</script>
</body>
</html>

  二、懒惰加载--当滚动条拉动到某个位置时,即将进入可视范围的图片需要加载

  三、

内容来自:http://tid.tenpay.com/?p=4085&ptlang=2052&ADUIN=731638471&ADSESSION=1440982512&ADTAG=CLIENT.QQ.5431_.0&ADPUBNO=26510

时间: 2024-10-19 00:26:41

js 按需加载的相关文章

按需加载.js .css文件

首先,理解按需加载当你需要用到某个js里面的函数什么鬼,或者某个css里的样式的时候你才开始加载这个文件. 然后是怎样实现的,简单来说就是在js中动态的createElem<script><link>这两种元算--这句话是说给自己的.可以绑定点击事件,滚轮事件(例如图片的懒加载是动态的.) 使用 require.js (一个按需加载的插件)管理.js按需加载,来自http://www.cnblogs.com/chenxizhang/archive/2013/05/16/308194

按需加载JS

JavaScript无非就是script标签引入页面,但当项目越来越大的时候,单页面引入N个js显然不行,合并为单个文件减少了请求数,但请求的文件体积却很大.这时候比较合理的做法就是按需加载.按需加载和按需执行JS比较类似,只不过要执行的JS变成了固定的“实现加载JS”的代码.按需加载实现的思路如下: 对滚动条进行事件绑定,假设绑定的函数为function lazyLoadJS(){}; 在函数lazyLoadJS中,按照下面思路实现:选择一个元素作为参照物,当滚动条即将靠近时该元素位置,开始执

angularjs ocLazyLoad分步加载js文件,angularjs ocLazyLoad按需加载js

用angular有一段时间了,平日里只顾着写代码,没有注意到性能优化的问题,而今有时间,于是捋了捋,讲学习过程记录于此: 问题描述:由于采用angular做了网页的单页面应用,需要一次性在主布局中将所有模块需要引用到的js都引入.对于比较小的项目,这是可行的,但是对于大的项目,一旦js文件较多,在页面首次加载时就引入所有js文件,无疑会延缓页面加载的速度,造成不良额用户体验.那么分布加载(按需加载)就显得很有必要了. <!DOCTYPE html> <html lang="en

Js外部资源按需加载

内容来源:http://hi.baidu.com/begin/item/df02bd79ca8cc0710d0a078a 按需加载js的研究和实现 加载js的基本原理,就是在DOM里面加载<script>元素,加载这些元素都是异步的过程.所以可以说是无阻塞的加载.但是如果脚本之间存在依赖的话,就会出现不可预知的错误.根据这个,在加载脚本的时候,需要监听"load"事件,对于IE的特殊性,需要监听"readystatechange"事件.基于这些,实现两个

不依赖jquery的图片LazyLoad按需加载js-echo.js

echo.min.js源码如下: /*! echo.js v1.7.0 | (c) 2015 @toddmotto | https://github.com/toddmotto/echo */ !function(t,e){"function"==typeof define&&define.amd?define(function(){return e(t)}):"object"==typeof exports?module.exports=e:t.e

AngularJS 进阶(一) 按需加载controller js (转帖)

我们在AngularJS中可以根据网址不同直接切换view,动态加载网页模板,但是控制模板的控制器需要先定义好才可以,不能和网页模板同时加载,这样就造成整个网站的JS都要先加载完成. requireJS是大家第一个想到的东西,但是体积有点大,github上就有个人用它写了Angular的动态加载controller模块,是通过js promise异步编程技术实现的,最后的解决很简单~~ 首先在$routeProvider里面加resolve属性 $routeProvider. when('/ph

laravel 单页面按需加载js/css文件

我们常把公共的header以及footer提炼出来,但是每个子页面的css和js又不相同,如果都写在了父模板里,对不需要的子模板来说是负担,造成不必要的开销,此时就需要按需加载,laravel给我们提供了这样的便利 父模板里 在需要加载 js/css 的位置写入 @stack('backend-register-js') 子模板 @push('backend-register-js') <script> js代码 </script> @endpush ********或者*****

实现异步加载js文件及加载完成后回调

模块化工具类实现方式 基于AMD.CMD模式的JS模块化管理工具越来越流行,这些工具通常只需在页面中加载对应的工具JS,其他JS文件都是异步加载的,比如RequireJS就可以象下面这样做. 首先在页面加载 <script data-main="scripts/main.js" src="scripts/require.js"></script> 然后工具会自动识别data-main属性值,并加载对应的JS文件,在main.js可以加载更多模

webpack 代码拆分,按需加载

转自:https://segmentfault.com/a/1190000007649417?utm_source=weekly&utm_medium=email&utm_campaign=email_weekly 如果利用 webpack 将项目中的所有代码打包在一起,很多时候是不适用的,因为代码中有些东西我们总是希望将其拆分出来.比如: 样式表,希望利用 link 标签引入 使用概率较低的模块,希望后期需要的时候异步加载 框架代码,希望能利用浏览器缓存下部分不易变动的代码 下面是我在阅