JS中图片缓冲loading技术的实例代码


Posted in Javascript onAugust 29, 2013
var Imgvalue; 
var Count =13;   //图片数量 
var Imgs = new Array(Count); 
var ImgLoaded =0; 
//预加载图片 
function preLoadImgs() 
{ 
alert('图片加载中请稍等......'); 
for(var i=0;i<Imgs.length;i++){ 
Imgs[i]=new Image(); 
downloadImage(i); 
} 
} 
//加载单个图片 
function downloadImage(i) 
{ 
    var imageIndex = i+1; //图片以1开始 
    Imgs[i].src = "images/"+imageIndex+".jpg"; 
    Imgs[i].onLoad=validateImages(i); 
} 
//验证是否成功加载完成,如不成功则重新加载 
function validateImages(i){ 
if (!Imgs[i].complete) 
    { 
     window.setTimeout('downloadImage('+i+')',200);     
    } 
else if (typeof Imgs[i].naturalWidth != "undefined" && Imgs[i].naturalWidth == 0) 
    { 
    window.setTimeout('downloadImage('+i+')',200); 
    } 
    else  
    { 
        ImgLoaded++ 
        if(ImgLoaded == Count) 
        { 
            document.getElementById('BtnStart').disabled=false; 
            document.getElementById('BtnStop').disabled=false; 
            alert('图片加载完毕!'); 
        } 
    } 
} 
//开始 
function RandStart() 
{ 
    Init = setInterval('SetRand()',50);     
} 
//随机显示 
function SetRand() 
{ 
    imageIndex = Math.floor(Math.random()*Count); 
    document.getElementById("ImgView").src = Imgs[imageIndex].src; 
} 
//结束 
function RandStop() 
{ 
    window.clearInterval(Init); 
}
Javascript 相关文章推荐
基于jquery扩展漂亮的CheckBox(自己编写)
Nov 19 Javascript
JQuery入门基础小实例(1)
Sep 17 Javascript
jQuery 1.9.1源码分析系列(十五)之动画处理
Dec 03 Javascript
prototype.js常用函数详解
Jun 18 Javascript
AngularJS ng-bind-html 指令详解及实例代码
Jul 30 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
vue.js中指令Directives详解
Mar 20 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
小程序实现单选多选功能
Nov 04 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
Vue自定义全局弹窗组件操作
Aug 11 Javascript
js中substring和substr的详细介绍与用法
Aug 29 #Javascript
由点击页面其它地方隐藏div所想到的jQuery的delegate
Aug 29 #Javascript
JavaScript自定义事件介绍
Aug 29 #Javascript
JavaScript包装对象使用介绍
Aug 29 #Javascript
JavaScript作用域链使用介绍
Aug 29 #Javascript
JavaScript 命名空间 使用介绍
Aug 29 #Javascript
JavaScript prototype 使用介绍
Aug 29 #Javascript
You might like
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
CI框架中zip类应用示例
2014/06/17 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
NodeJS框架Express的模板视图机制分析
2011/07/19 NodeJs
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
深入理解javaScript中的事件驱动
2013/05/21 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
jquery内置验证(validate)使用方法示例(表单验证)
2013/12/04 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
jQuery中ajax的load()与post()方法实例详解
2016/01/05 Javascript
通过正则表达式获取url中参数的简单实现
2016/06/07 Javascript
WEB开发之注册页面验证码倒计时代码的实现
2016/12/15 Javascript
AngularJS监听路由变化的方法
2017/03/07 Javascript
node.js程序作为服务并在windows下开机自启动(用forever)
2017/03/29 Javascript
jquery tmpl模板(实例讲解)
2017/09/02 jQuery
jQuery实现点击下拉框中的值累加到文本框中的方法示例
2017/10/28 jQuery
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
Django使用Celery异步任务队列的使用
2018/03/13 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
详解Django3中直接添加Websockets方式
2020/02/12 Python
Django User 模块之 AbstractUser 扩展详解
2020/03/11 Python
解决启动django,浏览器显示“服务器拒绝访问”的问题
2020/05/13 Python
Windows下PyCharm配置Anaconda环境(超详细教程)
2020/07/31 Python
网站性能延迟加载图像的五种技巧(小结)
2020/08/13 HTML / CSS
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
Wiggle美国:英国骑行、跑步、游泳、铁人三项商店
2018/10/27 全球购物
优秀经理获奖感言
2014/03/04 职场文书
公司晚会主持词
2014/03/22 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
父亲婚礼答谢词
2015/01/04 职场文书
毕业生党员个人总结
2015/02/14 职场文书
2015年国培研修感言
2015/08/01 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android