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.Treeview添加右键菜单的实现代码
Oct 22 Javascript
JavaScript Sort 的一个错误用法示例
Mar 20 Javascript
JavaScript实现select添加option
Jul 03 Javascript
jQuery实现的数值范围range2dslider选取插件特效多款代码分享
Aug 27 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
Dec 20 Javascript
jquery实现ajax加载超时提示的方法
Jul 23 Javascript
基于js中的原型、继承的一些想法
Aug 10 Javascript
js面向对象编程总结
Feb 16 Javascript
jQuery中each遍历的三种方法实例分析
Sep 07 jQuery
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
js+canvas实现转盘效果(两个版本)
Sep 13 Javascript
利用js实现简单开关灯代码
Nov 23 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/03/08 PHP
Yii模型操作之criteria查找数据库的方法
2016/07/15 PHP
PHP实现微信图片上传到服务器的方法示例
2017/06/29 PHP
jQuery 浮动广告实现代码
2008/12/25 Javascript
IE与Firefox在JavaScript上的7个不同写法小结
2009/09/14 Javascript
让人期待的2011年度最佳 jQuery 插件分享
2012/03/16 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
多种方法实现JS动态添加事件
2013/11/01 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
javascript 分号总结及详细介绍
2016/09/24 Javascript
浅谈js对象属性 通过点(.) 和方括号([]) 的不同之处
2016/10/29 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
2017/04/10 jQuery
基于Vue生产环境部署详解
2017/09/15 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
vue里面使用mui的弹出日期选择插件实例
2018/09/16 Javascript
vue-cli3+typescript初体验小结
2019/02/28 Javascript
深入理解python中的atexit模块
2017/03/07 Python
python基础教程项目三之万能的XML
2018/04/02 Python
numpy库与pandas库axis=0,axis= 1轴的用法详解
2019/05/27 Python
在jupyter notebook 添加 conda 环境的操作详解
2020/04/10 Python
python实现四人制扑克牌游戏
2020/04/22 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
如何用python爬取微博热搜数据并保存
2021/02/20 Python
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
CHARLES & KEITH台湾官网:新加坡时尚品牌
2019/07/30 全球购物
高级护理专业大学生求职信
2013/10/24 职场文书
学生实习推荐信范文
2013/11/26 职场文书
2014年庆元旦活动方案
2014/02/15 职场文书
优秀教导主任事迹材料
2014/05/09 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
2014年最新领导班子整改方案
2014/09/27 职场文书
2014年医务科工作总结
2014/12/18 职场文书
五好家庭事迹材料
2014/12/20 职场文书
创先争优承诺书
2015/01/20 职场文书
Python Pandas数据分析之iloc和loc的用法详解
2021/11/11 Python