Javascript函数调用得太快

Question

我遇到了一个Javascript函数的问题，该函数显然会被调用得太快。我有一种预感，这是一个悬念问题，但我不确定。

所以，我有该功能被分配给onclick一个<img>的：

function setModalPicture(picName){ 
 
    
 
    //Build the path to the picture 
 
    var pic= 'assets/img/art/'+picName; 
 
     
 
    //Set the picture 
 
    $('#g-modal-img').attr('src', pic);  
 
    
 
    adjustModalPadding();   
 
    
 
}

意图是＃克模态-IMG的src属性应被设置为img，然后才应调用adjustModalPadding。这是因为adjustModalPadding需要#g-modal-img的高度，在src设置为<img>之前为零。但是，我注意到这不能正常工作，并且如果我使adjustModalPaddin g登录到控制台的高度#g-modal-img，它显示为零。我认为这意味着该函数在src被设置为<img>之前被调用。

Answer 1

你需要等待图像加载：

function setModalPicture(picName){ 

    //Build the path to the picture 
    var pic= 'assets/img/art/'+picName; 

    //Set the picture 
    var img = $('#g-modal-img'); 
    img.one("load", adjustModalPadding).attr('src', pic); 
    if (img[0].complete) { 
     img.off("load", adjustModalPadding); 
     adjustModalPadding();   
    } 
} 

注意上面的顺序，因为它是重要的：

1. 首先，用一次性的处理程序挂钩load事件（one）。
2. 然后，设置src。
3. 检查图像是否已经完成：如果是，请删除处理程序并立即调用您的函数;否则，当load触发时，它将调用adjustModalPadding并将其作为处理程序移除。

您可能需要增加搬运到错误...

---

这里有一个工作示例：

function setModalPicture(picName) { 
 

 
    //Build the path to the picture 
 
    var pic = picName; // 'assets/img/art/'+picName; 
 

 
    //Set the picture 
 
    var img = $('#g-modal-img'); 
 
    img.one("load", adjustModalPadding).attr('src', pic); 
 
    console.log("img[0].complete after setting src: " + img[0].complete); 
 
    if (img[0].complete) { 
 
    img.off("load", adjustModalPadding); 
 
    adjustModalPadding(); 
 
    } 
 
} 
 

 
function adjustModalPadding() { 
 
    var img = $("#g-modal-img")[0]; 
 
    console.log("Size: " + img.width + "x" + img.height); 
 
} 
 
$("input[type=button]").on("click", function() { 
 
    console.log("img[0].complete before starting: " + $("#g-modal-img")[0].complete); 
 
    setModalPicture("https://graph.facebook.com/1035045703246692/picture?type=large"); 
 
});

<!-- In a comment, you said it starts out with src="" --> 
 
<img id="g-modal-img" src=""> 
 
<input type="button" value="Click Me"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

，在Chrome浏览器对我的作品， Firefox和IE11。

---

或者，您也可以通过克隆创建替换img元素：

function setModalPicture(picName) { 
 

 
    //Build the path to the picture 
 
    var pic = picName; // 'assets/img/art/'+picName; 
 

 
    //Set the picture 
 
    var img = $("#g-modal-img"); 
 
    var newImage = img.clone(); 
 
    img.replaceWith(newImage); 
 
    newImage.one("load", adjustModalPadding).attr('src', pic); 
 
    console.log("newImage[0].complete after setting src: " + newImage[0].complete); 
 
    if (newImage[0].complete) { 
 
    newImage.off("load", adjustModalPadding); 
 
    adjustModalPadding(); 
 
    } 
 
} 
 

 
function adjustModalPadding() { 
 
    var img = $("#g-modal-img")[0]; 
 
    console.log("Size: " + img.width + "x" + img.height); 
 
} 
 
$("input[type=button]").on("click", function() { 
 
    console.log("img[0].complete before starting: " + $("#g-modal-img")[0].complete); 
 
    setModalPicture("https://graph.facebook.com/1035045703246692/picture?type=large"); 
 
});

<!-- In a comment, you said it starts out with src="" --> 
 
<img id="g-modal-img" src=""> 
 
<input type="button" value="Click Me"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

，在Chrome浏览器，Firefox和IE11还为我工作。

---

最后，您可以从头开始创建（未克隆）的替代img元素：

function setModalPicture(picName) { 
 

 
    //Build the path to the picture 
 
    var pic = picName; // 'assets/img/art/'+picName; 
 

 
    //Set the picture 
 
    var img = $("#g-modal-img"); 
 
    var newImage = $("<img>").attr("id", "g-modal-img"); 
 
    img.replaceWith(newImage); 
 
    newImage.one("load", adjustModalPadding).attr('src', pic); 
 
    console.log("newImage[0].complete after setting src: " + newImage[0].complete); 
 
    if (newImage[0].complete) { 
 
    newImage.off("load", adjustModalPadding); 
 
    adjustModalPadding(); 
 
    } 
 
} 
 

 
function adjustModalPadding() { 
 
    var img = $("#g-modal-img")[0]; 
 
    console.log("Size: " + img.width + "x" + img.height); 
 
} 
 
$("input[type=button]").on("click", function() { 
 
    console.log("img[0].complete before starting: " + $("#g-modal-img")[0].complete); 
 
    setModalPicture("https://graph.facebook.com/1035045703246692/picture?type=large"); 
 
});

<!-- In a comment, you said it starts out with src="" --> 
 
<img id="g-modal-img" src=""> 
 
<input type="button" value="Click Me"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 2

当加载图像您可以使用事件：

var logo = document.getElementById('g-modal-img'); 

logo.addEventListener("load", function() { 
    adjustModalPadding();   
};