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 dom 操作详解 js加强
Jul 13 Javascript
javascript下arguments,caller,callee,call,apply示例及理解
Dec 24 Javascript
(function($){...})(jQuery)的意思
Jul 22 Javascript
JS定义回车事件(实现代码)
Jul 08 Javascript
基于jquery的simpleValidate简易验证插件
Jan 31 Javascript
浅谈javascript中createElement事件
Dec 05 Javascript
JS无缝滚动效果实现方法分析
Dec 21 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
Mint-UI时间组件起始时间问题及时间插件使用
Aug 20 Javascript
React父子组件间的传值的方法
Nov 13 Javascript
JavaScript实现移动端带transition动画的轮播效果
Mar 24 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中使用TCPDF生成PDF文档实例
2014/07/01 PHP
ThinkPHP3.2.2实现持久登录(记住我)功能的方法
2016/05/16 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PHP实现获取第一个中文首字母并进行排序的方法
2017/05/09 PHP
详解php实现页面静态化原理
2017/06/21 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
在JavaScript中获取请求的URL参数[正则]
2010/12/25 Javascript
js TextArea的选中区域处理
2010/12/28 Javascript
解决用jquery load加载页面到div时,不执行页面js的问题
2014/02/22 Javascript
js实现网页自动刷新可制作节日倒计时效果
2014/05/27 Javascript
兼容最新firefox、chrome和IE的javascript图片预览实现代码
2014/08/08 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
教你如何使用node.js制作代理服务器
2014/11/26 Javascript
bootstrap布局中input输入框右侧图标点击功能
2016/05/16 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
2016/08/08 Javascript
谈谈对JavaScript原生拖放的深入理解
2016/09/20 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
Vue.2.0.5过渡效果使用技巧
2017/03/16 Javascript
利用angular、react和vue实现相同的面试题组件
2018/02/19 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
解决angular双向绑定无效果,ng-model不能正常显示的问题
2018/10/02 Javascript
Nodejs libuv运行原理详解
2019/08/21 NodeJs
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
如何为Python终端提供持久性历史记录
2019/09/03 Python
在线购买澳大利亚设计师手拿包和奢华晚装手袋:Olga Berg
2019/03/20 全球购物
介绍一下#error预处理
2015/09/25 面试题
群众路线个人对照检查材料
2014/09/23 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
2015年酒店工作总结范文
2015/04/07 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
python3读取文件指定行的三种方法
2021/05/24 Python
教你使用pyinstaller打包Python教程
2021/05/27 Python
HDFS免重启挂载新磁盘
2022/04/06 Servers
电脑只能进入安全模式无法正常启动的解决办法
2022/04/08 数码科技