echarts.js 文件过大加载慢

2024-10-03

web项目中js加载慢问题解决思路

最近使用Echarts地图(版本为echarts2,echarts3目前无法下载地图版). 问题描述:之前使用require形式加载,地图首次加载显示要6-7秒,难以接受. js配置代码如下: <div class="w_b50 fl bg_x" id="main"> <script type="text/javascript" src="<%=request.getContextPath()%>/js/d

如何使用 require.js ，实现js文件的异步加载，避免网页失去响应，管理模块之间的依赖性，便于代码的编写和维护。

一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"></script> <script src="2.js"></script> <script src="3.js"></s

js文件如何最后加载

总结一下,大概有三种方式 1.最简单粗暴的:将js文件放在最后写 2.window.onload当一个文档完全下载到浏览器中时,才会触发window.onload事件.这意味着页面上的全部元素对js而言都是可以操作的,也就是说页面上的所有元素加载完毕才会执行.这种情况对编写功能性代码非常有利,因为无需考虑加载的次序. 3.$(document).ready{ }: 会在DOM完全就绪并可以使用时调用.虽然这也意味着所有元素对脚本而言都是可以访问的,但是,并不意味着所有关联的文件都已经下载完毕.换

js文件代码未加载或者没有js效果

问题:在页面中js文件中的代码未加载或者没有任何效果. 原因: 成功引用了js文件,但无效果或者提示未加载该文档中的代码. 可能页面引用js文件的路径存在问题解决: 重新检查你引用的js文件的路径是否正确: 一般是js代码存在语法问题,仔细检查标点符号.单双引号(本人源于这个问题),以及页面中是否有未结束的<!--的符号.

js中全局变量修改后的值不生效【jsp页面中各个js中内容的加载顺序】

一个老项目中,一个jsp文件中有很多个js文件, 现在要在页面上的一个地方判断一个状态,因为一直找不到原来是在哪里修改的那个状态,所以决定不找了,而是在比较靠前引入的一个js中定义一个全局变量,然后在这个js的 $(function(){}} 方法中通过一个ajax向后台获取正确的状态,然后在所有的js都加载完之后根据全局变量的值的状态来修改页面上的逻辑. 但是发现,全局变量被一个外部js修改赋值后,我在jsp页面的最下面居然取不到修改过的值. 请教同事才发现原来原因是任何一个js文件中的 $

require.js模块化管理和加载js（按需加载）简单实例教学

【转】JS判断SWF,JPG加载完毕、兼容（Activex,plugIn）所有浏览器

JS判断SWF,JPG加载完毕.兼容(Activex,plugIn)所有浏览器这里主要说下监听SWF的加载. 网上流传已久的监听方法,只能在IE(Activex插件下)下实现.在使用plugin的浏览器下无法监听. 首先贴张 chrome下载图这里提供一个可以监听所有浏览器的方式: 原作者在这里:http://blog.sebastian-martens.de/2010/05/preload-assets-with-javascript-load-complete-callback-for-

sea.js及三种加载方式的异同

一.前言浏览器本身并不提供模块管理的机制,过去网页开发中,为了使用各种模块,不得不在加入一大堆script标签.这样就使得网页体积臃肿,难以维护,还产生大量的HTTP请求,拖慢显示速度,影响用户体验.为了解决这个问题,前端的模块管理器应运而生.它可以轻松管理各种JavaScript脚本的依赖关系,自动加载各个模块,使得网页结构清晰合理. 最早的模块管理器是RequireJs,可以实现异步加载模块,之后出现了Brower.component.seaJs,还有模块化组织工具webpac

【转】Echarts的使用以及动态加载数据

一.Echarts的介绍 ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值域漫游等特性大大增强了用户体验,赋予了用户对数据进行挖掘.整合的能力.—— 大数据时代,重新定义数据图表的时候到了(ps:来自网络)自己最近使用echarts对中国石化客户关系进行可视化分析,结合官网学习了ECharts 中实现异步数据,然后自己作为小白在这里总结下使用方法

JS实现图片预加载无需等待

网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面.不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片. 知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是

判断js和css是否加载完成

在通过ajax或者src动态获取js.css文件的时候,我们常常需要判断文件是否加载完成,以便进行进一步的操作,但是在检测js.css文件是否已经加载的策略上各浏览器并不统一,有很多坑,现在在这里总结一下 css 判断CSS是否加载完成 1.在head标签内插入引入css的link标签 2.如果是ie浏览器直接使用onload事件其它浏览器用setTimeout循环轮询判断下面属性 3.如果是webkit内核判断 link节点上的sheet属性 4.其它浏览器判断节点上的sheet.cssR

Javascript 文件的同步加载与异步加载

HTML 4.01 的script属性 charset: 可选.指定src引入代码的字符集,大多数浏览器忽略该值.defer: boolean, 可选.延迟脚本执行,相当于将script标签放入页面body标签的底部,js脚本会在document的DOMContentLoaded之前执行.除IE和较新版本的Firefox外,其他浏览器并未支持.language: 已废弃.大部分浏览器会忽略该值.src: 可选.指定引入的外部代码文件,不限制后缀名.type: 必选.指定脚本的内容类型(MIME类

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了,导致出错.后来使用此法,保证了任何时候都完全是按照js的先后顺序执行的. 源码: /** * js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 * 原理:利用 ajax 异步多线程快速加载, 每个文件加载完成后存入到加载完成数组中, * 显示到页面时完全按传入的顺

页面性能优化-原生JS实现图片懒加载

在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果

JS里面的懒加载(lazyload)

懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽,且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源,让用户等待太久, 来,举个栗子,当你去东哥的绿帽网网购的时候,打开首页的时候,直接在导航栏选了商品种类跳转到了列表页,那首页下方那些未显示的区域的图片需不需要加载,当然不需

profile文件的错误加载与基本命令间的映射

一.绪论 [因为这篇心得是原创的,所以如果有哪处总结或者意见不足的地方,欢迎各位大神的批评和意见,共同学习,谢谢了!] 早些时候,需要在centos6.4系统中配置单机版和集群版单节点的hadoop HDFS,由于那时候一边跟老师学hadoop一边自学Linux.初学的自己懂得也不多,别人都用普通用户登录,在需要root权限时才sudo或者切换root用户进行配置,而我呢? 从一开始就使用了root登录,在给java和hadoop配置了profile文件环境变量,等到重启之后,出现了下图的现象:

vue第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期)

第七单元(vue的单文件组件形式-单文件组件的加载原理-vue-cli构建的开发环境以及生命周期) #课程目标掌握安装 vue-cli 命令行工具的方法,掌握使用命令行在本地搭建开发环境,使用命令行在本地运行项目. 精通项目结构,以及各文件和文件夹的作用. 精通单文件组件的文件组织形式,模板.js.样式的书写位置. 精通单文件组件的开发规则. 精通 vue 组件生命周期的使用. 了解 .vue 文件的加载原理. #知识点安装命令行工具 npm install -g @vue/cli # OR

Js控制iFrame切换加载网址

<html> <head> <title>Js控制 iFrame 切换加载网址</title> </head> <body> <a href="javascript:jumpto('http://www.163.com')">网易</a> | <a href="javascript:jumpto('http://www.baidu.com)"> 百度搜索<

用js判断页面是否加载完毕

用document.onreadystatechange的方法来监听状态改变, 然后用document.readyState == "complete"判断是否加载完成 document.onreadystatechange = function () { if (document.readyState == "complete") { alert("加载完毕"); } } document.readyState:判断文档是否加载完成.firef

js 判断iframe是否加载完毕

js 判断iframe是否加载完毕 CreationTime--2018年9月13日15点30分 Author:Marydon 1.javascript实现 window.onload = function() { var iframe = document.getElementById("myframe") if (iframe.attachEvent) { // IE iframe.attachEvent("onload", function() { ale

分享JQuery动画插件Velocity.js的六种列表加载特效

分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览源码下载实现的代码. html代码: <h1> Velocity.js <i>slice + sequence</i></h1> <pre>Only anim X number with FX#1, animate Y number with FX#2 etc

echarts.js 文件过大 加载慢

热门专题

echarts.js 文件过大加载慢