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

» 本文来自:前端开发者 » 《js原生处理图片加载等待问题》
» 本文链接地址:https://www.rokub.com/5952.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!