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 相关文章推荐
iis6+javascript Add an Extension File
Jun 13 Javascript
jquery form表单提交插件asp.net后台中文解码
Jun 12 Javascript
异步动态加载js与css文件的js代码
Sep 15 Javascript
AngularJS基础学习笔记之指令
May 10 Javascript
IE9+已经不对document.createElement向下兼容的解决方法
Sep 14 Javascript
使用jQuery判断Div是否在可视区域的方法 判断div是否可见
Feb 17 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
利用angular.copy取消变量的双向绑定与解析
Nov 25 Javascript
SVG描边动画
Feb 23 Javascript
JS实现标签页切换效果
May 04 Javascript
微信小程序 选项卡的简单实例
May 24 Javascript
关于jquery中attr()和prop()方法的区别
May 28 jQuery
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
超级实用的7个PHP代码片段分享
2012/01/05 PHP
PHP 中关于ord($str)&amp;gt;0x80的详细说明
2012/09/23 PHP
微信公众平台开发(五) 天气预报功能开发
2016/12/03 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
[原创]php正则删除img标签的方法示例
2017/05/27 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
JS BASE64编码 window.atob(), window.btoa()
2021/03/09 Javascript
一个js封装的不错的选项卡效果代码
2008/02/15 Javascript
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
JS中实现replaceAll的方法(实例代码)
2013/11/12 Javascript
js中的for如何实现foreach中的遍历
2014/05/31 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
jQuery Raty 一款不错的星级评分插件
2016/08/24 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
Python Paramiko模块的安装与使用详解
2016/11/18 Python
浅谈关于Python3中venv虚拟环境
2018/08/01 Python
python 实现矩阵上下/左右翻转,转置的示例
2019/01/23 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python的内存管理和垃圾回收机制详解
2019/05/18 Python
python计算无向图节点度的实例代码
2019/11/22 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
Python callable内置函数原理解析
2020/03/05 Python
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
俄罗斯品牌服装和鞋子的在线商店:KUPIVIP
2019/10/27 全球购物
什么是URL
2015/12/13 面试题
Python是如何进行类型转换的
2013/06/09 面试题
酒店前厅员工辞职信
2014/01/08 职场文书
婚礼新郎父母答谢词
2014/01/16 职场文书
2015清明节祭奠英烈寄语大全
2015/03/04 职场文书
庆祝教师节主题班会
2015/08/17 职场文书
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
如何使用Python提取Chrome浏览器保存的密码
2021/06/09 Python