在javascript中声明值后返回零

Question

我正在试图制作一个图库查看器，其中网页显示的是真实图像的大拇指，然后当图像被点击时，显示原始图像（与原始大小），div将html“img”元素更改为可见（否则默认情况下将其设置为隐藏），同时尝试获取图像的尺寸以便我可以适当地将不同尺寸的图像居中。到他们的宽度和问题是，每当我第一次点击任何拇指在页面加载后，获取图像宽度的语句发送0，然后当点击任何其他图像而不重新加载页面（包括前一个），它显示了以前的图像的维度，有时它的作品，有时不（大部分不），请帮助我。 JavaScript代码如下。

// JavaScript Document 
$(document).ready(function() { 
$.post(


"loadup.php", 
     { 
      refer:"yes" 
     },function(response){ 
      $("#gallery_view_tab").html(response); 
      initAll(); 
    }); 
}); 

function initAll(){ 
    $("<div id='imgViewer'></div>").appendTo("body"); //set up image viewer 
    $("#imgViewer").insertBefore("#monster_wrap"); //set before monster_wrap 

    var thumbimgs = $(".thumbimg"); 
    for(i=0; i<thumbimgs.length; i++){ 
     var thumbimg = thumbimgs[i].id; 
     var thumbid = '#'+thumbimg; 
     $(thumbid).click(loadImgviewer); 
    } 
} 

function loadImgviewer(){ 
    var imgLink = this.getAttribute("data-link"); 
    $("<img id='closeImgviewer' src='images/close.png' /><img src='' id='imgview' />").appendTo("#imgViewer"); 
    $("#imgview").attr('src', imgLink); 
    $("#imgViewer").css('visibility', 'visible'); 
     imgwidth = $("#imgview").width(); 
     screenwidth = $(window).width(); 
     var pos = (screenwidth - imgwidth)/2; 
     $("#log").html(pos); 
     $("#imgview").css('margin-left', pos); 

$("#closeImgviewer").click(unloadImgviewer); //set click event handler on image view closer 

} 

function unloadImgviewer(){ 
    $("#imgViewer").css('visibility', 'hidden'); 
    $("#imgview").attr('src', ''); 
    $("#imgViewer").empty(); 
} 

Answer 1

我刚刚重写了一下你的代码。

$(document).ready(function() { 
    $.post(
     "loadup.php", 
     { 
      refer:"yes" 
     }, 
     function(response){ 
      $("#gallery_view_tab").html(response); 
      initAll(); 
     } 
    ); 
}); 

function initAll(){ 
    $("<div id='imgViewer'></div>").appendTo("body"); //set up image viewer 
    $("#imgViewer").insertBefore("#monster_wrap"); //set before monster_wrap 
    $(".thumbimg").on('click', loadImgviewer); 
} 

function loadImgviewer(){ 
    var imgwidth, pos, 
     screenwidth = $(window).width(); 
    var imgLink = this.getAttribute("data-link"); 
    $("<img id='closeImgviewer' src='images/close.png' /><img src='' id='imgview' />").appendTo("#imgViewer"); 
    $("#imgview").attr('src', imgLink).on('load',function(evt){ 
     imgwidth = $(this).width(); 
     pos = (screenwidth - imgwidth)/2; 
     $("#log").html(pos); 
     $("#imgview").css('margin-left', pos); 
     $("#imgViewer").css('visibility', 'visible'); 
    }; 
    $("#closeImgviewer").click(unloadImgviewer); //set click event handler on image view closer 
} 

function unloadImgviewer(){ 
    $("#imgViewer").css('visibility', 'hidden'); 
    $("#imgview").attr('src', ''); 
    $("#imgViewer").empty(); 
} 

请试试看。没有尝试，但我认为它应该工作。