jquery - Jquery图像调整大小不能经常工作

Question

我正在使用 jquery 来调整图像大小。它在触发宽度和高度零值的一段时间内工作正常。这是我的代码。你们知道为什么它的宽度和高度返回零吗？

这是我正在使用的 jquery 代码

//Image Popup viewer
    function imgViewerLoad() {
        $(".imageViewer").fadeIn("slow");
        var windowWidth = document.documentElement.clientWidth;
        var windowHeight = document.documentElement.clientHeight;
        var ivHeight = $(".imageViewer").height();
        var ivWidth = $(".imageViewer").width();
            $(".imageViewer").css({
                "position": "absolute",
                "width": ivWidth,
                "min-width": ivWidth,
                "height": ivHeight,
                "left": (windowWidth/2-ivWidth/2)-53,
                "top": windowHeight/2-ivHeight/2
            });
        //After Load the image
        $(".imageViewer .loading-big").show();
        $(".imgPreview").load(function() {
            $(".loading-big").hide();

            //Added resize function for large image
            //Set max image size 90% of the window
            var max_w1 = ($(window).width()*90)/100;
            var max_h1 = ($(window).height()*90)/100;

            var this_w1 = $(".imgPreview").width();
            var this_h1 =$(".imgPreview").height();
            if(this_w1==0){this_w1=500}//if width==0 then refer to window fit size
            if(this_w1==0){this_w1=500}//if width==0 then refer to window fit size

            //Set back to its original size if new size exceed its original size
            if(max_w1 > this_w1) max_w1 = this_w1;
            if(max_h1 > this_h1) max_h1 = this_h1;

            if (this_w1/this_h1 < max_w1/max_h1) {
            var h1 = max_h1;
            var w1 = Math.ceil(max_h1/this_h1 * this_w1);
            } else {
            var w1 = max_w1;
            var h1 = Math.ceil(max_w1/this_w1 * this_h1);
            }
            $(".imgPreview").css({ height: h1, width: w1 });
            //End resizing

            $(this).fadeIn('slow');
            $(".nav .right").hide();//Hide Main Nav next prev
            $(".nav .imgViewNav").show();//Show image viewer next prev
            //Center image viewer
            var ivHeight1 = $(".imgPreview").height();
            var ivWidth1 = $(".imgPreview").width();
            $(".imageViewer").css({
                "position": "absolute",
                "width": ivWidth1,
                "min-width": ivWidth1,
                "height": ivHeight1,
                "left": (windowWidth/2-ivWidth1/2)-53,
                "top": windowHeight/2-ivHeight1/2
            });
        });
        $(".overLay").stop().fadeTo('slow',0.55).height(windowHeight);
    }

    //Load light box when clicked on thumbnail
    $('.secondary .imgWrapper').on('click',function() {//Touchend is for touch screen like ipad
           $(".imgPreview").remove();//Remove image viewer if exist
           //$(".imageViewer").append('<img src="'+ colorPath+ 'large/' + num +'.jpg" id="'+ num + '"/>');
           getImgPath = $(this).children('.iColor').attr('src');
           imgId = $(this).children('.iColor').attr('id');
           //$(".imageViewer").append('<img src="'+ colorPath+ num +'.jpg" id="'+ num + '"/>');

           newUrl = getImgPath.substring(0, getImgPath.lastIndexOf("."));//Remove extension
           finalUrl = newUrl.replace(/[0-9]+/g,'');//Remove number

           $(".imageViewer").append('<img src="'+ finalUrl + 'large/' + imgId +'.jpg" id="'+ imgId +'" class="imgPreview" />');

            //Load Image viewer function
            imgViewerLoad();

        });


    $('.next').click(function() {

        var getImgSrc = $(".imgPreview").attr('src');
        var getImgId = $(".imgPreview").attr('id');
        nextId = getImgId+++1;
        remExt = getImgSrc.substring(0, getImgSrc.lastIndexOf("."));//Remove extension
        remNum = remExt.replace(/[0-9]+/g,'');//Remove number

        //Declear var for total images on each page
        if($(".port").hasClass('Active')) {
            lastImg = 61;
        } else if($(".advs").hasClass('Active')) {
            lastImg = 43;
        }
        if(getImgId < lastImg) {//Disable click if this is last image
            $(".imgPreview").remove();//Remove image viewer if exist
            $(".imageViewer").removeAttr('style');
            $(".imageViewer").append('<img src="'+ remNum+nextId +'.jpg" id="'+ nextId +'" class="imgPreview" />');

            //Load Image viewer function
            imgViewerLoad();
        }

    })
    $('.prev').click(function(e) {
        var getImgSrc = $(".imgPreview").attr('src');
        var getImgId = $(".imgPreview").attr('id');
        nextId = getImgId-1;
        remExt = getImgSrc.substring(0, getImgSrc.lastIndexOf("."));//Remove extension
        remNum = remExt.replace(/[0-9]+/g,'');//Remove number

        if(getImgId > 1) { //Disable click if this is first image
        //$(".imgPreview").attr({'src': remNum+nextId+ '.jpg', 'id': nextId }); 

        $(".imgPreview").remove();//Remove image viewer if exist
        $(".imageViewer").attr('style','');
        $(".imageViewer").append('<img src="'+ remNum+nextId +'.jpg" id="'+ nextId +'" class="imgPreview" />');

        //Load Image viewer function
            imgViewerLoad();
        }
    })

    function hideImageViewer() {
        $('div.nav').addClass('stayOn').removeClass('stayOff');//Add class to nav
        $('.overLay').stop().fadeTo('slow',0).delay(1000).hide();
        $("div.imageViewer").hide().attr('style','z-index: 299; display:none;');
        $(".nav .right").show();
        $(".nav .imgViewNav").hide();
    }

    //Close Image viewer
    $('.overLay').click(function() {
        hideImageViewer();
    })
    $('.close').click(function() {
        hideImageViewer();
    });

和html代码