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 28 Javascript
js实时监听文本框状态的方法
Apr 26 Javascript
JS链式调用的实现方法
Mar 07 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
JS插件overlib用法实例详解
Dec 26 Javascript
JS组件系列之使用HTML标签的data属性初始化JS组件
Sep 14 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
jQuery响应滚动条事件功能示例
Oct 14 jQuery
VUE前端cookie简单操作
Oct 17 Javascript
在小程序/mpvue中使用flyio发起网络请求的方法
Sep 13 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 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采集腾讯微博的实现代码
2012/01/19 PHP
php多个字符串替换成同一个的解决方法
2013/06/18 PHP
PHP计算加权平均数的方法
2015/07/16 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
PHP MVC框架中类的自动加载机制实例分析
2019/09/18 PHP
PHP Swoole异步Redis客户端实现方法示例
2019/10/24 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
让任务管理器中的CPU跳舞的js代码
2008/11/01 Javascript
JQuery 图片的展开和伸缩实例讲解
2013/04/18 Javascript
一款jquery特效编写的大度宽屏焦点图切换特效的实例代码
2013/08/05 Javascript
javascript常用的正则表达式实例
2014/05/15 Javascript
JavaScript中的对象序列化介绍
2014/12/30 Javascript
jQuery聚合函数实例
2015/05/21 Javascript
轻量级网页遮罩层jQuery插件用法实例
2015/07/31 Javascript
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2015/08/26 Javascript
学习JavaScript设计模式(封装)
2015/11/26 Javascript
关于iframe跨域POST提交的方法示例
2017/01/15 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
JS的Ajax与后端交互数据的实例
2018/08/08 Javascript
vue axios封装httpjs,接口公用配置拦截操作
2020/08/11 Javascript
vue实现两个组件之间数据共享和修改操作
2020/11/12 Javascript
Python常用算法学习基础教程
2017/04/13 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python深度优先算法生成迷宫
2018/01/22 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
Python实现的远程登录windows系统功能示例
2018/06/21 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
python怎么删除缓存文件
2020/07/19 Python
奥地利领先的在线药房:SHOP APOTHEKE
2019/10/07 全球购物
美国在线艺术商店:HandmadePiece
2020/11/06 全球购物
大学生村官演讲稿
2014/04/25 职场文书
防沙治沙典型材料
2014/05/07 职场文书
2014预备党员党课学习心得范文
2014/07/08 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
php远程请求CURL案例(爬虫、保存登录状态)
2021/04/01 PHP