jquery attr（src）第一次不工作

Question

我在jQuery中更改src属性时遇到问题。

这是一些经验：

<a href='Imagini/someimage.jpg' class='popup' data-id='n' > 
    <img src='Imagini-min/someimage.jpg' /> 
</a> 

这里，弹出图像的容器：

<div class="gallery" align="center"> 
    <p id="close"><img src="Resurse/close.png" /></p> 
    <p id="prev"><img src="Resurse/left.png" /></p> 
     <img id="change" src="" data-id=""/> 
    <p id="next"><img src="Resurse/right.png" /></p> 
</div> 

和jQuery代码：

$(".popup").click(function(e){ 
    e.preventDefault(); 

    var img = $(this).attr("href"); 
    var id = $(this).attr("data-id"); 

    $(".gallery").show(); 
    if(id != $(".gallery").find("#change").attr("data-id")){ 
     $(".gallery").find("#change").attr("src", img).hide().fadeIn(100); 
     $(".gallery").find("#change").attr("data-id", id); 

     SetPosition(); 
    } 
    }); 

function SetPosition(){ 
    var width = $(".gallery").find("#change").width(); 
    var height = $(".gallery").find("#change").height(); 
    var button_h = $(".gallery #prev img").height(); 

    $(".gallery #prev").css("top",(height/2 - button_h + 10)); 
    $(".gallery #next").css("top",(height/2 - button_h + 8)); 

    $(".gallery").css("width",(width+50)); 
    $(".gallery").css("height",(height+10)); 
} 

的问题是，当我打开浏览器并单击我得到的任何图像： http://oi60.tinypic.com/2mq5gmg.jpg

如果按一次，去正常： http://oi59.tinypic.com/qpqdk8.jpg

有人有这样的问题？

Answer 1

看看这个：

change src

HTML

<a href='javascript:void(0)' src='Imagini/someimage.jpg' class='imagePopup' data-id='n' > 
    <img src='Imagini-min/someimage.jpg' /> 
</a> 
<div class="gallery" align="center"> 
    <p id="close"><img src="Resurse/close.png" /></p> 
    <p id="prev"><img src="Resurse/left.png" /></p> 
     <img id="change" src="" data-id=""/> 
    <p id="next"><img src="Resurse/right.png" /></p> 
</div> 

jQuery的

$("a.imagePopup").click(function(e){ 
    //The event.preventDefault() method stops the default action of an element from happening. but it does not work in all browser. 

    e.preventDefault(); 

    var img = $(this).attr("src"); 
    var id = $(this).attr("data-id"); 
    var galleryID=$(".gallery").find("#change").attr("data-id"); 
    var targetImg=$(".gallery").find("#change"); 
    $(".gallery").show();  
    if(id != targetImg.attr("data-id")){ 
     targetImg.attr("src", img).hide().fadeIn(100).attr("data-id", id); 
     alert("src="+targetImg.attr("src")+", id="+targetImg.attr("data-id")); 

     SetPosition(); 
    } 
    }); 

function SetPosition(){ 
    var width = $(".gallery").find("#change").width(); 
    var height = $(".gallery").find("#change").height(); 
    var button_h = $(".gallery #prev img").height(); 

    $(".gallery #prev").css("top",(height/2 - button_h + 10)); 
    $(".gallery #next").css("top",(height/2 - button_h + 8)); 

    $(".gallery").css("width",(width+50)); 
    $(".gallery").css("height",(height+10)); 
} 

更新

在img.load（）中调用“SetPosition”函数; Update

Answer 2

也许这种变化有助于：

$(".gallery").find("#change").hide(); 
$(".gallery").find("#change").attr("src", img); 
$(".gallery").find("#change").fadeIn(100);