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

也许这种改变会有所帮助：

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

Answer 2

看看这个：

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