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 相关文章推荐
动态改变textbox的宽高的js
Oct 26 Javascript
使用jQuery的ajax功能实现的RSS Reader 代码
Sep 03 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
jQuery中:checkbox选择器用法实例
Jan 03 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
100行代码理解和分析vue2.0响应式架构
Mar 09 Javascript
用Webpack构建Vue项目的实践
Nov 07 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
Vue3 中的数据侦测的实现
Oct 09 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 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
B2K与车机的中波PK
2021/03/02 无线电
浅谈PHP中如何实现Hook机制
2017/11/14 PHP
php 与 nginx 的处理方式及nginx与php-fpm通信的两种方式
2018/09/28 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
PHP程序守护进程化实现方法详解
2020/07/16 PHP
一款js和css代码压缩工具[附JAVA环境配置方法]
2010/04/16 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
JavaScript检查某个function是否是原生代码的方法
2014/08/20 Javascript
Js类的静态方法与实例方法区分及jQuery拓展的两种方法
2016/06/03 Javascript
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
Jquery实现无缝向上循环滚动列表的特效
2019/02/13 jQuery
javascript中如何判断类型汇总
2019/05/14 Javascript
Vue实现点击按钮复制文本内容的例子
2019/11/09 Javascript
Node.js API详解之 querystring用法实例分析
2020/04/29 Javascript
[03:47]2015国际邀请赛第三日现场精彩回顾
2015/08/08 DOTA
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
[01:01]2020完美高校联赛(秋)西安落幕
2021/03/11 DOTA
Python爬取网易云音乐上评论火爆的歌曲
2017/01/19 Python
Python爬虫实现全国失信被执行人名单查询功能示例
2018/05/03 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
Linux下python3.6.1环境配置教程
2018/09/26 Python
Python虚拟环境的创建和包下载过程分析
2020/06/19 Python
Python requests及aiohttp速度对比代码实例
2020/07/16 Python
python 匿名函数与三元运算学习笔记
2020/10/23 Python
Python 多进程、多线程效率对比
2020/11/19 Python
Joe Fresh官网:加拿大时尚品牌和零售连锁店
2016/11/30 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
采购员岗位职责
2013/11/15 职场文书
工商管理毕业生推荐信
2013/12/24 职场文书
制作部班长职位说明书
2014/02/26 职场文书
社区党员公开承诺书
2014/08/30 职场文书
公安民警正风肃纪剖析材料
2014/10/10 职场文书
拾金不昧感谢信
2015/01/21 职场文书
行政前台岗位职责
2015/04/16 职场文书