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();          
    
}

意图是将#g-modal-img 的src 属性设置为img，然后才应调用adjustModalPadding。这是因为adjustModalPadding 需要#g-modal-img 的高度，在src 设置为<img> 之前为零。但是，我注意到这不能正常工作，如果我让adjustModalPadding 将#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. 首先，使用一次性处理程序 (one) 挂钩 load 事件。
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();          
};