html代码：{#$item.title#}时 间：{#$item.start_date#}-{#$item.end_date#}地 点：{#$item.area_name#}{#$item.title#}时 间：{#$item.start_date#}-{#$item.end_date#}地 点：{#$item.area_name#}{#$item.title#}时 间：{#$item.start_date#}-{#$item.end_date#}地 点：{#$item.area_name#}上一页12下一页js代码$(window).load( function() {$('#kppcl').BlocksIt({numOfCol: 3,offsetX: 5,offsetY: 5});});va...
几个月前在一个项目中涉及到树形栏，然后看了很多插件，觉得有点麻烦，于是自己写了一个，写着写着就出问题了。 当时项目是通过树形栏进行权限控制的，管理员可以对从数据库去的数据动态生成树形栏进行增删改查操作，可是用$(".XX").click();方法是不行的。 1、之前用的是jq1.4.3 ,jq1.7一下都可以使用live()方法，来实现该功能$(‘#div').live(‘click',function(){ //do stuff });但是live方法也有不支持的事件，例如:toggle事件...
最近在一个新的web项目中开发功能。这个项目的管理界面有一个特点，框架是固定的，不会刷新，每次点新的页面仅仅刷新一个div。div里面不是套的iframe，于是导致了一个问题，用浏览器无法调试异步加载页面里包含的js文件。简单的说就是在调试工具里面看不到异步加载页面里包含的js文件。 网上找到了一个解决办法，就是在需要调试的js文件顶部加一行代码： //@ sourceURL=msgprompt.js 注意，@符号和sourceURL间必须有空格。Chrome下...
前言关于JavaScript脚本加载的问题，相信大家碰到很多。主要在几个点——1> 同步脚本和异步脚本带来的文件加载、文件依赖及执行顺序问题 2> 同步脚本和异步脚本带来的性能优化问题深入理解脚本加载相关的方方面面问题，不仅利于解决实际问题，更加利于对性能优化的把握并执行。 先看随便一个script标签代码——代码如下:如果放在上面，会阻塞所有页面渲染工作，使得用户在脚本加载完毕并执行完毕之前一直处于“白屏死机”状态。而末...
js异步加载的4种方式，点评开始。 方案1：$(document).ready$(document).ready(function() {alert("加载完成！");});点评： 1、需要引用jquery 2、兼容所有浏览器。 方案2：标签的async="async"属性 async的定义和用法(是HTML5的属性) async 属性规定一旦脚本可用，则会异步执行。 示例：
Bigpipe介绍 Facebook首创的一种减少HTTP请求的，首屏快速加载的的异步加载页面方案。是前端性能优化的一个方向。 BigPipe与AJAX的比较 AJAX主要是XMLHttpRequest，前端异步的向服务器请求，获取动态数据添加到网页上。这样的往返请求需要耗费时间，而BigPipe技术并不需要发送XMLHttpRequest请求，这样就节省时间损耗。减少请求带来的另一个好处就是直接减少服务器负载。还有一个不同点就是AJAX请求前服务器在等待。请求后页面在等...
展现效果:1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现.实现思路:1.当用户点击load button执行异步请求. 调用方法 出现加载条2.怎么实现进度条呢？1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index = 999. 加载的时候让用户无法修改界面值2) 在document.body 新增一个动态的div.代码实现: Main.html:LoadLoading.js:function showLoading() { var overDiv = document.createElement("div"...
本文实例为大家分享了turn.js异步加载实现翻书效果的具体代码，供大家参考，具体内容如下 1、阅读翻书js /*** 电子翻书*/ //var width = 1080; //var height = 1680;var width = "10rem"; var height = "15.2rem";window.onload = function () {//预加载//loading(18,1);initData(); }function getQueryString(name) {var result = window.location.search.match(new RegExp("[\?\&]" + name + "=([^\&]+)", "i"));if (result == n...
webpack提供的一个非常强大的功能就是code spliting(代码切割)。 在webpack 1.x中提供了require.ensure([], () => {let module = require(./page1/module);// do something}, module1)利用require.ensure这个API使得webpack单独将这个文件打包成一个可以异步加载的chunk. 具体的套路见我写的另一篇blog: webpack分包及异步加载套路 一句话总结就是： 在输出的runtime代码中,包含了异步chunk的id及chunk name的映射关系。需要异步加...
本人第一次使用vue awesome。 踩到的坑确实不少。官网上面的用法写的很简单，按照上面做法基本会遇到如下这个问题 轮播第二次之后，首屏会自动跳过 网上找了很多资料，都不能解决这个问题。于是自己琢磨了很久终于灵光一闪。一个小技巧解决了这个问题。 使用方法应该很简单，去官网可以查看到方法。基本步骤如下 npm install vue-awesome-swiper --save-dev在main.js中 import VueAwesomeSwiper from vue-awesome-swiper import sw...
本文介绍了vue异步加载高德地图的实现，分享给大家，具体如下：几种加载js的方式 同步加载异步加载延迟加载同步加载用的最多的一种方式，又称阻塞模式，会阻止浏览器的后续处理，停止后续的解析，只有当当前加载完成，才能进行下一步操作。所以默认同步执行才是安全的。但这样如果js中有输出document内容、修改dom、重定向等行为，就会造成页面堵塞。所以一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。 <scrip...
1.第一例 const Home = resolve => {import("@/components/home/home.vue").then( module => {resolve(module)} }注：（上面import的时候可以不写后缀） export default [{path: /home,name:home,component: Home,meta: {requireAuth: true, // 添加该属性可以判断出该页面是否需要登录显示}, }]2.第二例 const router = new Router({routes: [{path: /home,component: (resolve)=> {require([../components/home/home], resolve) ...
同步加载的问题 默认的js是同步加载的，这里的“加载”可以理解成是解析、执行，而不是“下载”，在最新版本的浏览器中，浏览器对于代码请求的资源都是瀑布式的加载，而不是阻塞式的，但是js的执行总是阻塞的。这会引起什么问题呢？如果我的index页面要加载一些js，但是其中的某个请求迟迟得不到响应，于是阻塞了后面的js代码的执行（同步加载），同时页面渲染也不能继续（如果js引入是在head标签后）。 <script type="text/javasc...
实现异步加载的方法，归根结底大都是根据webpack的require.ensure来实现 第一个是自己使用require.ensure实现， 第二种 使用loader实现 今天我们说的是使用bundle-loader来实现，这样代码更优雅些。 首先需要安装bundle-loader ，具体使用npm还是yarn，就看你的包管理使用的是啥了。 下面需要一个bundle.js import React, { Component } from react; export default class Bundle extends Component {constructor(props) {super(pr...
这几天，看了一下ECharts官网的API和Demo发现很有意思，于是就利用模型预测产生的数据做一个伪实时的动态数据显示 。 首先，创建一个index.html的文件，我用的vscode打开的，进行编写。 1.插入一个标签 <div id="main" style="width:600px;height:400px;"></div>设置他的一些style（可自行美化，我很懒！！！）。 2.在body下建一个<script>脚本（为什么要在body下写js脚本呢？因为这是提高用户体验，可自行百度深层次的原因~~~）。...