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 相关文章推荐
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
jquery xMarquee实现文字水平无缝滚动效果
Apr 29 Javascript
15个jquery常用方法、小技巧分享
Jan 13 Javascript
使用Node.js实现HTTP 206内容分片的教程
Jun 23 Javascript
jQuery实现简单的点赞效果
May 29 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
Jun 06 Javascript
jquery注册文本框获取焦点清空,失去焦点赋值的简单实例
Sep 08 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
解决axios发送post请求返回400状态码的问题
Aug 11 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
JS散列表碰撞处理、开链法、HashTable散列示例
Feb 08 Javascript
微信小程序顶部导航栏可滑动并选中放大
Dec 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
用定制的PHP应用程序来获取Web服务器的状态信息
2006/10/09 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
2007/01/09 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
表单验证的完整应用案例探讨
2013/03/29 Javascript
怎么选择Javascript框架(Javascript Framework)
2013/11/22 Javascript
jQuery插件实现大图全屏图片相册
2015/03/14 Javascript
javascript中CheckBox全选终极方案
2015/05/20 Javascript
JavaScript实现算术平方根算法-代码超简单
2015/09/11 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
AngularJS中使用HTML5手机摄像头拍照
2016/02/22 Javascript
js实现键盘自动打字效果
2016/12/23 Javascript
nodejs操作mysql实现增删改查的实例
2017/05/28 NodeJs
protractor的安装与基本使用教程
2017/07/07 Javascript
ionic2中使用自动生成器的方法
2018/03/04 Javascript
element ui table(表格)实现点击一行展开功能
2018/12/04 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
js事件触发操作实例分析
2019/06/21 Javascript
vue登录页面cookie的使用及页面跳转代码
2019/07/10 Javascript
vue-dplayer 视频播放器实例代码
2019/11/08 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
2020/04/10 Javascript
如何在Vue中使localStorage具有响应式(思想实验)
2020/07/14 Javascript
[02:54]DOTA2英雄基础教程 暗影牧师戴泽
2013/12/05 DOTA
[58:57]2018DOTA2亚洲邀请赛3月29日小组赛B组 Effect VS VGJ.T
2018/03/30 DOTA
Python实现批量下载文件
2015/05/17 Python
详解python中sort排序使用
2019/03/23 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
写一个在SQL Server创建表的SQL语句
2012/03/10 面试题
学生会副主席竞聘书
2014/03/31 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
2015学校师德师风工作总结
2015/04/22 职场文书
2017新年晚会开幕词
2016/03/03 职场文书
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技