JS中图片缓冲loading技术的实例代码

为什么80%的码农都做不了架构师？>>>

JS中图片缓冲loading技术的实例代码。

代码如下：

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);
}
//验证是否成功加载完成，如不成功则重新加载
//by www.jbxue.com
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);
}

转载于:https://my.oschina.net/kk2009/blog/157775

JS中图片缓冲loading技术的实例代码相关推荐

android view存储为jpg,Android长按imageview把图片保存到本地的实例代码
工具类之前用 AsyncTask 现在改用rxJava public class SaveImageUtils { public static void imageSave(final ImageV ...
基于JS实现新闻列表无缝向上滚动实例代码
当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <h ...
html代码id,浅谈html中id和name的区别实例代码
浅谈html中id和name的区别实例代码更新时间:2008年07月28日 23:00:55 作者: 这个是form里面的name与id的区别我们可以通过一段代码来分析一下其中的微妙差别: 在 ...
python处理分组_Python中的groupby分组功能的实例代码
pandas中的DataFrame中可以根据某个属性的同一值进行聚合分组,可以选单个属性,也可以选多个属性: 代码示例: import pandas as pd A=pd.DataFrame([['B ...
php根据图片地址获取图片原始高宽,Js获取图片原始宽高的实现代码
如果我们页面看到的图片都是缩略图,那就需要做个图片点击放大效果,那么怎样获取图片的原始宽高呢?方法如下: //获取图片原始宽度 function getNaturalWidthAndHeight(im ...
java屏蔽虚拟按键代码_Android 中隐藏虚拟按键的方法实例代码
下面通过一段代码给大家讲解android 隐藏虚拟按键的方法,废话不多说了,大家多多看看代码和注释吧,具体代码如下所示: /** * 隐藏虚拟按键,并且全屏 */ protected void hid ...
html li点隐藏,js控制li的隐藏和显示实例代码
html页面全部({$count}) 钢琴谱({$count_pu}) 钢琴曲({$count_qu}) 钢琴专辑({$count_zhuanji}) 钢琴全集({$count_quanji}) 钢 ...
js控制台输出佛祖保佑图形图案实例代码
简介 js控制台输出佛祖保佑图形图案实例代码演示代码普通款 console.log([ " _ooOoo_", " o8888888o", " ...
JS中图片的处理与合成（生成水印）
以美图的图片处理为例子,学习JS中对图片的处理.处理图片时需要使用canvas 1 图片的跨域使用canvas处理图片,首先需要加载图片,如果是在线图片需要针对图片进行跨域的处理.具体的处理方法是: ...
html js相册样式,JavaScript+CSS相册特效实例代码
下面小编就为大家带来一篇JavaScript+CSS相册特效实例代码.小编觉得挺不错的,现在就分享JavaScript+css的源码给大家,也给大家做个参考.对JavaScript和css制作相册感兴 ...

JS中图片缓冲loading技术的实例代码

JS中图片缓冲loading技术的实例代码相关推荐

最新文章

热门文章