JS实现页面加载时带loading进度条页面加载时loading实现方法loading实现大概就这个意思，首先将要显示的内容隐藏，先显示loading文字或图片什么的，然后文档加载完毕后将内容显示出来，loading隐藏掉就好了。这里我用到了jquery，用不用无所谓。<html> <head> <script language="javascript" type="text/javascript" src="jquery-1.6.1.js"> </script> /** * 页面加载完成后显示页面 */ function showPage(){ $(#divPageLoadin...
在页面中引入Pace.js，页面就会自动监测你的请求（包括Ajax请求），在事件循环滞后，会在页面记录加载的状态以及进度情况。此插件的兼容性很好，可以兼容IE8以上的所有主流插件，而且其强大之处在于，你还可以引入加载进度条的主题样式，你可以选择任意颜色和多种动画效果（例如简约、闪光灯，MAC OSX，左侧填充，顶部填充，计数器和弹跳等等动画效果），如果你擅长修改css动画，那你就可以做出无限种可能性的动画，为你的网站增添...
前言网络上各大论坛，尤其是一些图片类型的网站上，在图片加载时均采用了一种名为懒加载的方式，具体表现为，当页面被请求时，只加载可视区域的图片，其它部分的图片则不加载，只有这些图片出现在可视区域时才会动态加载这些图片，从而节约了网络带宽和提高了初次加载的速度，具体实现的技术并不复杂，下面分别对其说明。Web 图片的懒加载就是通过读取img元素，然后获得img元素的data-src（也可以约定为其他属性名）属性的值，并赋...
前言对于Pinterest网站，从前端设计出发的话，我们一定不会忘记我们曾经非常流行的瀑布流布局。但是今天，给大家简要分析下 Pinterest上另外一项非常值得借鉴图片加载细节。看看下面的截图:大家可以感觉到图片出来的时候预先绘制轮廓，重点是预制区域的颜色采用与图片较为相似的色彩值，当图片加载完全后，会有种渐入的效果。其中谷歌的图片搜索也用到了类似效果:我们称之为这种效果为Color Placeholder [色彩预置]，当图片加载的时...
本篇文章主要介绍了懒加载和预加载两种技术的解析，废话不多说，一起来看吧。懒加载也叫延迟加载：前一篇文章有介绍：JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片。预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。懒加载的意义及实现方式有：...
项目的一个前端页面展示已购买商品时，要求能下拉加载更多。关于如何实现『加载更多』功能，网上有插件可用，例如比较著名的使用iscroll.js实现的上拉加载更多、下拉刷新功能。但实际用起来却是很麻烦。由于是第三方插件，要按照对方定义的方法使用，用起来总感觉很不顺心。再加上iscroll.js本身并没有集成加载更多的功能，需要进行自行扩展。想继续使用iscroll.js实现加载更多功能的，上面给的链接可以看看。h5项目里需要实现简单...
前言本文介绍的是自定义require函数让浏览器实现按需加载Js文件，那到底要怎么自己写一个按需加载的库呢为了实现按需加载：//这是我们要实现的功能，require(str.js)时加载str.js文件，并创建一个叫str对象，等加载完毕之后执行str对象的ready方法里的函数。var str = require(str.js);str.ready(show);//要执行的函数function show(res){console.log(res);}//str.js 文件，提供"我是str"字符串//require.js 这个是我们要写的库 ...
jQuery $(document).ready()执行顺序：当页面DOM 元素全部加载完毕后就执行.ready()。$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。如果在.ready()执行之前有javascript代码存在，那么javascript将怎么执行呢？答案是先执行.ready()之前的javascript代码，然后执行.ready()。多个$(document).ready()的执行顺序并非单纯的顺序执行，其与嵌套层级也有一定的关系。--------------------js加载执行顺序---------...
并行加载JS，但是执行的时候却按顺序执行，提高网站速度<script src="js/head.min.js"></script> <script type="text/javascript"> head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/my_validate.js"); </script> 注意：head.js("js/jquery-1.6.1.min.js","js/jquery.validate.min.js","js/my_validate.js"); 里面包含的JS在本地文件夹里面必须有，否则在IE中部执行如：head.js("js/jquery-1.6.1.min.js","js/...
在开发过程中想要在某个时机去刷新某个固定的页面，去更新该页面某些控件的属性，比如显示隐藏、是否可点击等。是用的主要是通过 刷新该页面，方法如下： 方法一： 在该页面中调用： location.reload(); 方法二： 在该页面调用： locatiion.replace("NEW_URL"); 方法三： windows.location.href="NEW_URL";当然 也支持子页面刷新父页面的操作，但是子页面和父页面是通过HTML包含的关系，...
[javascript] view plain copy print?用JavaScript刷新上级页面和当前页面 <script type="text/javascript"> window.parent.main.document.location.reload();//上级页面 document.location.reload();//当前页面 每个frame元素或者iframe元素就是一个框架,这个框架是一个窗口,在这个窗口中加载一个html文档.使用下面的几种方法都可以引用frame或iframe元素: window.frames[index] windows.frames["框架名"] windows.框架名 如果想从...
在使用PDFObject.js时，由于后台需要转换数据，在前台显示的时候，有很长一段时间显示空白页面，所以想到写一个假的加载动画script片段：<script type="text/javascript"> var bar = 0; var line = "||" ; var amount ="||" ; function count(){ bar= bar+2 ; amount =amount + line; $("#chart").val(amount); $("#percent").val(bar+"%"); if (bar<99){ //设置1.5秒循环一次 setTimeout("count()",150); }else{ $("#befor...
图片延时加载技术对大流量的网站来说是十分实用的。目前图片在网站中大量使用，如果不加处理的话会对服务器和带宽造成级大压力，通过只渲染当前用户可见区域的图片，可以极大地减少网站的请求数，降低网络带宽资源。 unveil 这是一款十分轻量级的片时图片加载组件 支持现代浏览器及IE7+, Github上面有将近3K个star(关注) 使用 一般图片<img src="bg.png" data-src="img1.jpg" /> 对于支持 retina (视网膜屏幕) 设...
在JavaScript中定义一个函数，有两种写法：function ftn(){} // 第一种 var ftn = function(){} // 第二种有人说，这两种写法是完全等价的。但是在解析前，前一种写法会被解析器自动提升到代码的头部，因此违背了函数先定义后使用的原则，所以建议定义函数时候，全部采用后一种写法。看完这句话，我第一个感觉是两个在使用时候是完全一致的，只是解析上有所差异。但是他的解释“前一种写法会被解析器自动提升到代码的头部”让我很困...
引用的头部文件代码 <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/component/ztree/css/zTreeStyle/zTreeStyle.css" /> <script type="text/javascript" src="<%=request.getContextPath()%>/component/ztree/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="<%=request.getContextPath()%>/component/ztree/js/jquery.ztree.core.js"></script> <script type="text/...