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动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
js弹出的对话窗口永远保持居中显示
Dec 15 Javascript
js转化毫秒为时间格式代码
Apr 10 Javascript
js实现浏览器窗口大小被改变时触发事件的方法
Feb 02 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
JavaScript类型系统之正则表达式
Jan 05 Javascript
BootStrap导航栏问题记录
Jul 31 Javascript
angular2中使用第三方js库的实例
Feb 26 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
微信小程序代码上传、审核发布小程序
May 18 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
Oct 25 Javascript
用Node写一条配置环境的指令
Nov 14 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
劣质的PHP代码简化
2010/02/08 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
PHP 图片处理
2020/09/16 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
用RadioButten或CheckBox实现div的显示与隐藏
2013/09/21 Javascript
jQuery实现表单步骤流程导航代码分享
2015/08/28 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
浅谈JS中String()与 .toString()的区别
2016/10/20 Javascript
理解javascript中的Function.prototype.bind的方法
2017/02/03 Javascript
JavaScript实现简单的树形菜单效果
2017/06/23 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
jquery-file-upload 文件上传带进度条效果
2017/11/21 jQuery
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
微信小程序实现图片上传
2019/05/23 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
在Python的web框架中编写创建日志的程序的教程
2015/04/30 Python
Python与Java间Socket通信实例代码
2017/03/06 Python
python实现抽奖小程序
2020/04/15 Python
Python爬虫HTPP请求方法有哪些
2020/06/03 Python
NIHAOMARKET官方海外旗舰店:意大利你好华人超市
2018/01/27 全球购物
美国宠物美容和宠物用品购物网站:Cherrybrook
2018/12/07 全球购物
New Balance比利时官方网站:购买鞋子和服装
2021/01/15 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
暑期实习鉴定
2013/12/16 职场文书
物流专员岗位职责
2014/02/17 职场文书
电脑售后服务承诺书
2014/03/27 职场文书
就业意向书范文
2014/04/01 职场文书
房产买卖委托公证书
2014/04/04 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
发展党员工作情况汇报
2014/10/28 职场文书
学年个人总结范文
2015/03/05 职场文书
500字作文之关于爸爸
2019/11/14 职场文书