javascript - 如何在使用 JQuery 加载图像后运行代码

Question

我试图仅在加载 img 元素后加载一个元素，但我已经尝试了我能想到的所有方法，但没有任何效果。现在我试图查看代码停止工作的位置，我发现我设置的警报没有在我需要代码执行的行之后运行。

$img = $('#picture');
function bubbleOnLoad() {
  $(document).ready(function() {
    $img.load(function(){
    alert('document loaded')
    $('#left-bubble').show();
  })
})

$img 是在一个函数中定义的。警报在 document.ready 行有效，但在 $img.load 之后无效。我尝试添加事件监听器、jquery .on、.load 和其他一些。我还调用函数在我的 init 函数中运行。有人可以向我解释为什么没有任何效果吗？

function choosePic() 
 $('.speechbubble').hide();
 $('#picture').remove();
 var randomNum = Math.floor(Math.random() * samplePics.length);
 var img = new Image();
 img.onload = function() {
  $('.playing-field').prepend(img);
 handleImageLoad();
 }
 img.src = samplePics[randomNum];
 img.id = "picture";
}


var samplePics = 
 "assets/images/barack-obama.jpg",
 "assets/images/donald-trump_3.jpg",
 "assets/images/dt-2.jpg",
 "assets/images/bill-clinton.jpg",
 "assets/images/Rose-Byrne.jpg",
 "assets/images/pic.jpeg", 
 "assets/images/priest.jpg", 
 "assets/images/tb.jpg",
 "assets/images/test.jpg", 
 "assets/images/amy-poehler.jpg",
 "assets/images/stephen-colbert.jpg",
 "assets/images/aziz-ansari.jpg"
];

Answer 1

您的代码中存在一些语法错误，我已更正并得出以下结论:

function bubbleOnLoad() {
    $img = $('#picture');
    $img.load(function () {
        alert('document loaded');
        $('#left-bubble').show();
    });
}

$(document).ready(function () {
    bubbleOnLoad();
});

Here is the JSFiddle demo