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 相关文章推荐
ExtJS 入门
Oct 29 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
Javascript引用指针使用介绍
Nov 07 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
js实现按一下删除键删除整个单词附demo
Sep 05 Javascript
JavaScript AOP编程实例
Jun 16 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
详解一个小实例理解js原型和继承
Apr 24 Javascript
jquery UI实现autocomplete在获取焦点时得到显示列表功能示例
Jun 04 jQuery
微信小程序保存图片到相册权限设置
Apr 09 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开源建站平台小结
2010/04/22 PHP
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
浅谈php优化需要注意的地方
2014/11/27 PHP
php获取网站百度快照日期的方法
2015/07/29 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
Joomla实现组件中弹出一个模式(modal)窗口的方法
2016/05/04 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
php判断/计算闰年的方法小结【三种方法】
2019/07/06 PHP
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
2007/04/12 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
2014/05/03 Javascript
js跨域问题浅析及解决方法优缺点对比
2014/11/08 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
浏览器环境下JavaScript脚本加载与执行探析之defer与async特性
2016/01/14 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
Javascript中构造函数要注意的一些坑
2017/01/23 Javascript
JavaScript 下载svg图片为png格式
2018/06/21 Javascript
小程序scroll-view安卓机隐藏横向滚动条的实现详解
2019/05/16 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
在node环境下parse Smarty模板的使用示例代码
2019/11/15 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
python中numpy.zeros(np.zeros)的使用方法
2017/11/07 Python
利用python GDAL库读写geotiff格式的遥感影像方法
2018/11/29 Python
Python字典的核心底层原理讲解
2019/01/24 Python
python-tkinter之按钮的使用,开关方法
2019/06/11 Python
Python代码实现http/https代理服务器的脚本
2019/08/12 Python
Python字节单位转换实例
2019/12/05 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
最新PyCharm 2020.2.3永久激活码(亲测有效)
2020/11/26 Python
前端水印的简单实现代码示例
2020/12/02 HTML / CSS
个人委托书格式
2014/04/04 职场文书
陈安之励志演讲稿
2014/08/21 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
sqlserver2017共享功能目录路径不可改的解决方法
2021/04/16 SQL Server
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers