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 相关文章推荐
Javascript中暂停功能的实现代码
Mar 04 Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
jQuery实现渐变下拉菜单的简单方法
Mar 11 Javascript
jquery获取form表单input元素值的简单实例
May 30 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
Jun 21 Javascript
javascript获取网页各种高宽及位置的方法总结
Jul 27 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
BootStrap下的弹出框加载select2框架失败的解决方法
Aug 31 Javascript
微信小程序实现跑马灯效果
Oct 21 Javascript
详解React项目如何修改打包地址(编译输出文件地址)
Mar 21 Javascript
vue响应式更新机制及不使用框架实现简单的数据双向绑定问题
Jun 27 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
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php中global和$GLOBALS[]的分析之一
2012/02/02 PHP
php遍历目录与文件夹的多种方法详解
2013/11/14 PHP
深入剖析PHP中printf()函数格式化使用
2016/05/23 PHP
微信红包随机生成算法php版
2016/07/21 PHP
php+ajax 文件上传代码实例
2019/03/18 PHP
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
js下拉框二级关联菜单效果代码具体实现
2013/08/03 Javascript
倒记时60刷新网页的js代码
2014/02/18 Javascript
JS弹出可拖拽可关闭的div层完整实例
2015/02/13 Javascript
JS实现点击文字对应DIV层不停闪动效果的方法
2015/03/02 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
纯js模仿windows系统日历
2017/02/04 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
通过实例解析vuejs如何实现调试代码
2020/07/16 Javascript
python中hashlib模块用法示例
2017/10/30 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
python查找重复图片并删除(图片去重)
2019/07/16 Python
pytorch中的transforms模块实例详解
2019/12/31 Python
Tensorflow tensor 数学运算和逻辑运算方式
2020/06/30 Python
记一次python 爬虫爬取深圳租房信息的过程及遇到的问题
2020/11/24 Python
安卓程序员求职信
2014/02/28 职场文书
2014领导干部四风问题查摆思想汇报
2014/09/13 职场文书
学生党员检讨书范文
2014/12/27 职场文书
工作保证书
2015/01/17 职场文书
css display table 自适应高度、宽度问题的解决
2021/05/07 HTML / CSS
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
SQL Server #{}可以防止SQL注入
2022/05/11 SQL Server
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS