Question

我的Javascript函数出现问题，显然很快被调用了。我有预感这是一个悬挂问题，但我不确定。

所以，我将此功能分配给onclick的{{1}}：

＆＃13;

<img>

＆＃13;

目的是将＃g-modal-img的src属性设置为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。这是因为adjustModalPadding需要adjustModalPadding的高度，在src设置为#g-modal-img之前为零。但是，我注意到这不能正常工作，如果我将<img> g adjustModalPaddin的高度记录到控制台，则显示为零。我认为这意味着在src设置为#g-modal-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();          
    }
}

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

首先，使用一次性处理程序（one）挂钩load事件。
然后，设置src。
检查图像是否已经完成：如果是，请删除处理程序并立即调用您的函数;否则，当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();          
};

Javascript函数调用太快

2 个答案: