js原生处理图片加载等待问题

前端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配置前端开发环境