前端atom开发环境配置 gulp前端开发环境 前端开发环境
/
- 一个处理大图片加载速度慢的问题
- 要先引入jquery
- *///获得浏览器类型
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);/*
- 图片加载
- url:加载路径
- callback:回调函数
- */
function loadImage(url,callback)
{
var img = new Image();
img.src=url;
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState==”complete”||img.readyState==”loaded”){
callback.call(img);
return;
}
callback.call(img);
}
}else if(Browser.Moz){
img.onload=function(){
if(img.complete==true){
callback.call(img);
return;
}
callback.call(img);
}
}
}
/*
- 数据格式
- 注意:最后一条数据不能有末尾的逗号(,)
/
var imglist = [
/
{index:0,name:”百度图片1″,url:”http://img.redocn.com/201010/3/599750_1286086064SSce.jpg>},
{index:1,name:”百度图片2″,url:”http://pic2.ooopic.com/01/26/61/83bOOOPIC72.jpg>},
{index:2,name:”百度图片3″,url:”http://pica.nipic.com/2007-11-12/20071112133257795_2.jpg>},
{index:3,name:”百度图片4″,url:”http://www.leawo.cn/attachment/201402/19/1880530_1392807424l5gk.jpg>}
*/
];
/*
- 判断图片是否加载完毕
- index:图片游标
- imglist:集合
- 这个方法一般都在页面中调用
*/
var loadStart = function(list,fn){
if(list.length == 0){
fn();
return true;
}
var j = 0;
for(var i = 0; i<list.length;i++){
loadImage(list[i].src,function(){
j++;
if(j == list.length){
fn();
}
});
}
}
//调用这个方法 就开始执行了
//loadStart();
linux-web前端开发环境 idea前端开发环境搭建 vim配置前端开发环境
» 本文来自:前端开发者 » 《js原生处理图片加载等待问题》
» 本文链接地址:https://www.rokub.com/5952.html
» 您也可以订阅本站:https://www.rokub.com
评论前必须登录!
注册