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 29 Javascript
原生js和jquery实现图片轮播淡入淡出效果
Apr 23 Javascript
jquery图片滚动放大代码分享(2)
Aug 28 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
Nov 15 Javascript
javascript性能优化之DOM交互操作实例分析
Dec 12 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
js实现百度地图定位于地址逆解析,显示自己当前的地理位置
Dec 08 Javascript
详解Angular-Cli中引用第三方库
May 21 Javascript
vue底部加载更多的实例代码
Jun 29 Javascript
windows实现npm和cnpm安装步骤
Oct 24 Javascript
layui实现form表单同时提交数据和文件的代码
Oct 25 Javascript
用JavaScript实现贪吃蛇游戏
Oct 23 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实现指定字符串中查找子字符串的方法
2015/03/17 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
Laravel5.1 框架Middleware中间件基本用法实例分析
2020/01/04 PHP
把textarea中字符串里含有的回车换行替换成&amp;lt;br&amp;gt;的javascript代码
2007/04/20 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
理解Javascript闭包
2013/11/01 Javascript
关闭时刷新父窗口两种方法
2014/05/07 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
CSS3实现动态背景登录框的代码
2015/07/28 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
2015/11/04 Javascript
关于TypeScript中import JSON的正确姿势详解
2017/07/25 Javascript
jQuery实现表格冻结顶栏效果
2017/08/20 jQuery
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
解决vue脚手架项目打包后路由视图不显示的问题
2018/09/20 Javascript
微信小程序实现滑动翻页效果(完整代码)
2019/12/06 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
python通过线程实现定时器timer的方法
2015/03/16 Python
举例介绍Python中的25个隐藏特性
2015/03/30 Python
约瑟夫问题的Python和C++求解方法
2015/08/20 Python
python实现自动发送邮件
2018/06/20 Python
Tesserocr库的正确安装方式
2018/10/19 Python
pycharm+PyQt5+python最新开发环境配置(踩坑)
2019/02/11 Python
python函数的万能参数传参详解
2019/07/26 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
python同时遍历两个list用法说明
2020/05/02 Python
Pycharm配置autopep8实现流程解析
2020/11/28 Python
CSS3动画:5种预载动画效果实例
2017/04/05 HTML / CSS
html5 横向滑动导航栏的方法示例
2020/05/08 HTML / CSS
idealfit英国:世界领先的女性健身用品和运动衣物品牌
2017/11/25 全球购物
奥斯汀独木舟和皮划艇:Austin Canoe & Kayak
2018/05/22 全球购物
人力资源管理专业毕业生自荐书
2014/05/25 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
Golang ort 中的sortInts 方法
2022/04/24 Golang