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 建设银行登陆键盘
Jun 10 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
jQuery实现的鼠标滑过弹出放大图片特效
Jan 08 Javascript
JavaScript实现同一个页面打开多张图片
Dec 29 Javascript
基于JavaScript实现窗口拖动效果
Jan 18 Javascript
js时间查询插件使用详解
Apr 07 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
jQuery实现文件编码成base64并通过AJAX上传的方法
Apr 12 jQuery
Django+vue跨域问题解决的详细步骤
Jan 20 Javascript
vue实现输入框的模糊查询的示例代码(节流函数的应用场景)
Sep 01 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
js实现双色球效果
Aug 02 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水印技术
2007/02/14 PHP
php 从数据库提取二进制图片的处理代码
2009/09/09 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
PHP中提问频率最高的11个面试题和答案
2014/09/02 PHP
YII视图整合kindeditor扩展的方法
2016/07/13 PHP
PHP 进度条函数的简单实例
2017/09/19 PHP
ie和firefox中img对象区别的困惑
2006/12/27 Javascript
prototype 学习笔记整理
2009/07/17 Javascript
浅析js封装和作用域
2013/07/09 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jQuery on方法传递参数示例
2014/12/09 Javascript
解决JS请求服务器gbk文件乱码的问题
2015/10/16 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
jQuery获取剪贴板内容的方法
2016/06/16 Javascript
jQuery 检查某个元素在页面上是否存在实例代码
2016/10/27 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
jQuery Validate 无法验证 chosen-select元素的解决方法
2017/05/17 jQuery
JS+jQuery实现注册信息的验证功能
2017/09/26 jQuery
layUI的验证码功能及校验实例
2019/10/25 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
[05:03]显微镜下的DOTA2第十期——Ti3豪之超神幽鬼
2014/06/23 DOTA
使用python Fabric动态修改远程机器hosts的方法
2018/10/26 Python
PyQt QListWidget修改列表项item的行高方法
2019/06/20 Python
python实现桌面托盘气泡提示
2019/07/29 Python
浅析与CSS3的loading动画加载相关的transition优化
2015/05/18 HTML / CSS
世界上最大的在线旅行社新加坡网站:Expedia新加坡
2016/08/25 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
EJB面试题
2015/07/28 面试题
2013年研究生毕业感言
2014/02/06 职场文书
职工年度考核评语
2014/12/31 职场文书
爱心捐助活动总结
2015/05/09 职场文书
中国现代文学之经典散文三篇
2019/09/18 职场文书
SpringBoot整合阿里云视频点播的过程详解
2021/12/06 Java/Android
Java异常体系非正常停止和分类
2022/06/14 Java/Android