动态加载js且只加载一次

2024-10-11

js的动态加载、缓存、更新以及复用（一）

使用范围: OA.MIS.ERP等信息管理类的项目,暂时不考虑网站. 遇到的问题: 完成一个项目,往往需要引用很多js文件,比如jQuery.js.easyUI等.还有自己写的一些列js文件,那么这些文件如何方便的加载,如果文件有变化如何才能让客户端及时更新缓存?如果能够提高点运行效率,那就更好了. 目标: 1. 可以方便的引用js文件. 2. 尽量使用各种缓存,避免频繁从服务器读取文件. 3. 如果js文件有更新或者增加.减少几个减少js文件,需要客户端能够自动.立刻更新. 4. Js

jquery.fancybox.js 解决只加载一次的问题

问题描述:有一块图片区域,页面第一次加载的时候jQuery(".fancybox-button").fancybox({}); 使用ajax上传成功后显示在图片区域,再次jQuery(".fancybox-button").fancybox({}); 这时会出现问题:明显的现象是图片加载不出来,同时弹窗颜色会变黑(更加不透明,应该是多个弹窗重叠的效果) 参考:https://stackoverflow.com/questions/15154522/how-to-de

jquery load 加载改造，只加载body

背景: 项目中大量用到了jquery和easyui组件,原生load经常出现主页面异常,原因是组件被重复初始化.也考虑过用iframe,但是在实际项目中的效果,最终取消了iframe方案,也尝试了其他一些方案,相对好用的便是load改造版. jquer load详解:http://www.w3school.com.cn/jquery/ajax_load.asp 核心代码: function loadHTML(url,contener){ // contener:dom对象或者id var ct

图片预加载 js css预加载

图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden"> <script type="text/javascript"> <![CDATA[//><!-- var images = new Array()

js的异步加载你真的懂吗

面试高频之js的异步加载讲这个问题之前, 我们从另一个面试高频问题来切入, 我们的web页面从开始解析到页面渲染完成都经历了什么 ? 1 , 创建document对象, 开始解析页面, 此时document.readyState = 'loading' 2 , 遇到link标签引入的css文件, 创建线程并异步加载css,继续解析文档 3, 遇到script标签引入的外部脚本 , 如果script标签的属性设置了defer或者async 则创建线程异步加载js

（转）高性能JavaScript：加载和运行（动态加载JS代码）

浏览器是如何加载JS的当浏览器遇到一个<script>标签时,浏览器首先根据标签src属性下载JavaScript代码,然后运行JavaScript代码,继而继续解析和翻译页面.如果需要加载的js文件很多很大,则会让人感觉页面加载很慢,影响页面的交互.浏览器在遇到<body>之前,不会渲染页面的任何部分,如果此时<head>中需要加载的js文件很大的话,可能用户开始看到的页面就是一个“白板”,这种情况会立马让用户崩溃. Internet Explorer 8, Fir

动态加载JS代码

到处查资料研究js动态脚本的加载,找到以下7种方法,总有一种适合你! 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在里面写一个方法functionOne,很简单,代码如下: function functionOne(){ alert("成功加载"); } 后面的html文件都创建在同一个目录下. 方法一:直接document.write 在同一个文件夹下面创建一个function1.html,代码如下: <html> <

jquery getScript动态加载JS方法改进详解[转载]

转载自http://www.jb51.net/article/31973.htm 有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法 $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当网站需要加载大量js时,动态的加载js就是一个比较好的方法,当需要某个功能时再将相应的js加载进来. 但是自己在使用过程中却发现了一些不尽如意的地方. 每次需要执行该功能的时候都会去请求一次这个js,这样不是

动态加载js css 插件

简介动态加载js,css在现在以及将来肯定是很重要的.目前来看前端代码编写的业务量已经远远超过后端编写的.随着对用户体验度逐渐增强,前端业务复杂,加载速度变得很慢很慢.为了解决这个问题,目前出现的两个前端模块加载器为require.js与sea.js,这两款模块加载器都不错.但是呢,有时候我仅仅需要的只是动态加载一个js,不需要把代码模块化,那我们只能自己手写一个加载函数. 简单的加载js /** * HTML动态加载js * @path {String} src地址必须带有后缀名.js *

js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

js的引用,在浏览器,或微信上访问经常会遇到文件改了,但就是没有更新的问题,使用此函数可以轻松解决缓存问题只需要把js的引用方式改为使用此函数加载即可源码如下: /** * js动态加载js css文件,可以配置文件后辍,防止浏览器缓存 * @param {obj} config 加载资源配置 * @param {string} version 资源后辍配置 */ function jsCssLoader(config,version) { this.css = config.css; thi

动态加载JS函数

一般性的,当我们需要加载js文件的时候都会使用script标签来实现,类似于如下代码: 代码如下: <script type="text/javascript" src="example.js"></script> 但是直接使用script标签来加载js文件会有如下一些缺点: 1.严格的读取顺序.由于浏览器按照<script>在网页中出现的顺序,读取Javascript文件,然后立即运行,导致在多个文件互相依赖的情况下,依赖性最小

AMD和RequireJS初识----优化Web应用前端(按需动态加载JS)

RequireJS是一个非常小巧的JavaScript模块载入框架,是AMD规范最好的实现者之一.最新版本的RequireJS压缩后只有14K,堪称非常轻量.它还同时可以和其他的框架协同工作,使用RequireJS必将使您的前端代码质量得以提升. 一.AMD 介绍前端开发在近一两年发展的非常快,JavaScript作为主流的开发语言得到了前所未有的热捧.大量的前端框架出现了,这些框架都在尝试着解决一些前端开发中的共性问题,但是实现又不尽相同.在这个背景下,CommonJS社区诞生了,为了让前

详谈LABJS按需动态加载js文件

为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间:于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS渲染文件的时候,在去请求这些文件,这样就节省了页面的加载时间 LABjs 是一个很小的 JavaScript 工具,用来根据需要加载 JavaScript 文件,通过使用该工具可以提升页面的性能,避免加载不需用到的 JavaScript 文件,可以实现动态并行加载脚本文件,以及管理加载脚本文件的执行

页面加载异常清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存

js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法一.CSS和JS为什么带参数(形如.css?t=与.js?t=)怎样获取代码 css和js带参数(形如.css?t=与.js?t=) 使用参数有两种可能: 第一.脚本并不存在,而是服务端动态生成的,因此带了个版本号,以示区别. 即上面代码对于文件来说等价于但浏览器会认为他是该文件的某个版本! 第二.客户端

js怎么动态加载js文件（JavaScript性能优化篇）

下面介绍一种JS代码优化的一个小技巧,通过动态加载引入js外部文件来提高网页加载速度 [基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂的. [合并JS代码,尽可能少的使用script标签] 最常见的方式就是带代码写入一个js文件中,让页面只使用一次<script></script>标签来引入 [无堵塞加载JS] 通过给script标签增加 defer属性或者是 a

jquery getScript动态加载JS方法改进详解

有许多朋友需要使用getScript方法动态加载JS,本文将详细介绍此功能的实现方法 $.getScript(url,callback) 这个方法是jquery自身提供的一个用于动态加载js的方法.当网站需要加载大量js时,动态的加载js就是一个比较好的方法,当需要某个功能时再将相应的js加载进来. 但是自己在使用过程中却发现了一些不尽如意的地方. 每次需要执行该功能的时候都会去请求一次这个js,这样不是在帮倒忙嘛? 于是找到Jquery官网的API说明 http://api.jquery.co

js动态加载js文件(js异步加载之性能优化篇)

1.[基本优化] 将所有需要的<script>标签都放在</body>之前,确保脚本执行之前完成页面渲染而不会造成页面堵塞问题,这个大家都懂. 2.[合并JS代码,尽可能少的使用script标签] 最常见的方式就是带代码写入一个js文件中,让页面只使用一次<script></script>标签来引入 3.[使用async和defer] 通过给script标签增加 defer属性或者是 async 属性来实现,async和defer不同之处是async加载完成

动态加载js和css

开发过程中经常需要动态加载js和css,今天特意总结了一下常用的方法. 1.动态加载js 方法一:动态加载js文件 // 动态加载js脚本文件 function loadScript(url) { var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.body.appendChild(script); } /

动态加载JS脚本

建立dynamic.js文件,表示动态加载的js文件,里面的内容为: function dynamicJS() { alert("加载完毕"); } 如下方法中的html页面和dynamic.js文件在一个目录下. 一. document.write() <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <ti

动态加载js文件

由于最近在弄echarts,关于地图类的效果,但是全国地图整体的js文件太大了,加载很耗费资源,所以要根据不同省份加载不同地区的js地图, 于是就想的比较简单, var script = document.createElement ("script") script.type = "text/javascript"; script.src = url; document.getElementsByTagName("head")[0].appen

记一次奇怪IE动态加载js的乱码

1. 问题背景某个老产品需要支持IE8,前端部分组件采用scrat开发体系进行开发的,当页面中内嵌的iframe的页面再加载组件js的时候,某些情况下会出现组件的js乱码,导致组件的js不能运行.而且,乱码并不会在第一次加载页面时发生,而是第二次第三次-加载页才会发生. 页面结构详细情况如下(页面编码为啥没统一,因为有历史原因-请忽略): 当用node的express服务放置iframe对应的页面时,不会出现问题. 当用tomcat服务器放置iframe对应页面时,不会出现问题. 不管用nod

动态加载js且只加载一次

热门专题