jquery插件图片浏览改进版

在关于《jquery插件图片浏览》中遗留一个问题，“有点小问题：当图片第一次加载没完成的时候，这时图片没有显示，会自动执行到下一张图片”

改进版代码如下：

    (function($){
        $.fn.mPicsList = function(options){
            var picsImgs = $(this).find("img");
            var picsImgsLen = picsImgs.length;
            var index = 1;
            var ltBtn = $(".leftbtn");
            var rtBtn = $(".rightbtn");
            var pageNum = $(".allpics");
            var curPage = $(".curpic");
            var isAdd = true;
            var stop = "";
                    
            var defaults = {   
                isAuto: 1,
                runTime: 5000,    
                fadeInTime: 800
            };
                    
            var opts = $.extend(defaults, options, {});

            this.each(function(){
                pageNum.html(picsImgsLen);  
                if(!!defaults.isAuto){
                    autoPlay();
                    $(this).hover(function(){
                        clearInterval(stop);
                    },function(){
                        autoPlay();
                    });
                }
                        
                function autoPlay(){
                    isAdd = true;
                    stop = setInterval(function(){
                        index=addNum(isAdd,index);
                        if(!!picsImgs.eq(index).attr("msrc")){
                            loadImage(picsImgs.eq(index).attr("msrc"),index);
                        }
                        else{
                            running(index);
                        }
                    },defaults.runTime);
                }
                        
                ltBtn.click(function(){
                    isAdd = false;
                    index=addNum(isAdd,index);
                    if(!!picsImgs.eq(index).attr("msrc")){
                        loadImage(picsImgs.eq(index).attr("msrc"),index);
                    }
                    else{
                        running(index);
                    }
                });
                    
                rtBtn.click(function(){
                    isAdd = true;
                    index=addNum(isAdd,index);
                    if(!!picsImgs.eq(index).attr("msrc")){
                        loadImage(picsImgs.eq(index).attr("msrc"),index);
                    }
                    else{
                        running(index);
                    }
                });
            });
                    
            function addNum(isAdd,num){
                if(isAdd){
                    num++;
                    if(num>parseInt(picsImgsLen-1)){
                        num = 0;
                    }
                }
                else{
                    num--;
                    if(num<0){
                        num = picsImgsLen-1;
                    }
                }
                return num;
            }

            function running(num){
                curPage.html(parseInt(num+1));
                picsImgs.hide().removeClass("on").eq(num).addClass("on").fadeIn(defaults.fadeInTime);
            }
                
            function loadRun(num){
                if(typeof(picsImgs.eq(num).attr("msrc"))!=="undefined"){
                    var tmp = picsImgs.eq(num).attr("msrc");
                    picsImgs.eq(num).addClass("on").attr("src",tmp).removeAttr("msrc");
                }
                $(".mloading").hide();
            }
                    
            function loadImage(url,num){
                $(".mloading").show();
                var o= new Image();
                o.src = url;
                if(o.complete){
                    loadRun(num);
                    running(num);
                }else{
                    o.onload = function(){
                        loadRun(num);
                        running(num);
                    };
                    o.onerror = function(){
                    };
                }
            }
        }  
    })(jQuery);

    $("#mpics").mPicsList({"isAuto":1});

html结构部分

<div id="page">
    <img class="mloading" alt="" src="./images/loading.gif?v1" />
    <div id="mpics">
        <img class="on" alt="" src="./images/120923/mi001.jpg" /> 
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi002.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi003.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi004.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi005.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi006.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi007.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi008.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi009.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi010.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi011.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi012.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi013.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi014.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi015.jpg" />
        <img alt="" src="./images/transparent.png" msrc="./images/120923/mi016.jpg" />
        <a class="leftbtn"></a>
        <a class="rightbtn"></a>
    </div>
    <div class="downpics">
        <span class="curpic">1</span>/<span class="allpics">16</span>
    </div>
</div>